• 0354.502.773
  • cskh@laptrinhjavaweb.com

Học lập trình java spring boot spring framework thiết kế website bán hàng cơ bản miễn phí

Spring boot tạm chia làm 2 loại là viết api web service và thiết kế website

Trong nội dung hôm nay, laptrinhjavaweb chia sẽ mọi người cách thiết kế webiste bán hàng sử dụng Spring boot

Hy vọng qua nội dung này, mọi người có thể xây dựng được 1 website bán hàng sử dụng Spring Boot kết hợp với các kỹ thuật: Spring MVC, Spring Data JPA, Spring Security, Restful API Web Service ...

Các thông tin liên quan tới nội dung học lập trình java spring boot thiết kế website bán hàng cơ bản miễn phí

- Playlist youtube

+ Chi tiết: XEM TẠI ĐÂY

- Tham gia nhóm Facebook để được giải đáp thắc mắc 

+ Chi tiết: JOIN NHÓM TẠI ĐÂY

- Các phần mềm, thư viện sử dụng

+ Intellij

+ Java 8

+ Maven 3.6.0

+ Tomcat 8.5

+ Spring boot 2.0.9.RELEASE

Mọi người download các phần mềm tại đây: laptrinhjavaweb.com/huong-dan-cai-dat-phan-mem-4

Danh sách nội dung hướng dẫn

Nội dung Video hướng dẫn Bài viết hướng dẫn
Bài 1: Tạo project ban đầu XEM TẠI ĐÂY XEM TẠI ĐÂY
Bài 2.1: Apply template và phân chia giao diện trong spring mvc phần 1 XEM TẠI ĐÂY XEM TẠI ĐÂY
Bài 2.2: Apply template và phân chia giao diện trong spring mvc phần 2 XEM TẠI ĐÂY
Bài 2.3: Apply template và phân chia giao diện trong spring mvc phần 3 XEM TẠI ĐÂY

 

Tài liệu sử dụng trong video

Chú ý: hiện tại phần tài liệu này bổ trợ cho video, do đó mọi người kết hợp xem video và sử dụng tài liệu để làm hiệu quả

Bài 2 Apply template và phân chia giao diện trong spring mvc

Template demo: TẢI TẠI ĐÂY

Template admin: TẢI TẠI ĐÂY

2.1 Thêm đoạn code phía dưới vô file MvcConfig.java

@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
    registry.addResourceHandler(
"/template/**").addResourceLocations("/template/");
}

2.2 Thêm đoạn code phía dưới vô file POM.xml

<!--template sitemesh decorator-->
<dependency>
    <
groupId>opensymphony</groupId>
    <
artifactId>sitemesh</artifactId>
    <
version>2.4.2</version>
</
dependency>

2.3 Thêm đoạn code sau vô file taglib.jsp

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="dec" uri="http://www.opensymphony.com/sitemesh/decorator"%>

2.4 Thêm đoạn code sau vô file web.xml

<!-- sitemesh filter -->
<filter>
    <
filter-name>sitemesh</filter-name>
    <
filter-class>com.opensymphony.module.sitemesh.filter.PageFilter</filter-class>
</
filter>
<
filter-mapping>
    <
filter-name>sitemesh</filter-name>
    <
url-pattern>/*</url-pattern>
    <
dispatcher>REQUEST</dispatcher>
    <
dispatcher>FORWARD</dispatcher>
</
filter-mapping>

2.5 Thêm đoạn code sau vô file decorators.xml

<?xml version="1.0" encoding="UTF-8"?>
<decorators defaultdir="/decorators">

    <
excludes>

    </
excludes>

   
<!-- apply Sitemesh default template -->
   
<decorator name="web" page="web.jsp">
        <
pattern>/*</pattern>
    </
decorator>

   
<!-- apply Sitemesh default template -->
   
<decorator name="admin" page="admin.jsp">
        <
pattern>/admin*</pattern>
    </
decorator>
</
decorators>

2.6 Code load file css, js

<link rel="stylesheet" href="<c:url value='/template/web/vendor/bootstrap/css/bootstrap.min.css' />" />

<script src="<c:url value='/template/web/vendor/jquery/jquery.min.js' />"></script>

2.7 Code trang admin.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="dec" uri="http://www.opensymphony.com/sitemesh/decorator"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<html>
<
head>
    <
title>Title</title>
    <
link rel="stylesheet" href="<c:url value='/template/admin/assets/css/bootstrap.min.css' />" />
    <
link rel="stylesheet" href="<c:url value='/template/admin/assets/font-awesome/4.2.0/css/font-awesome.min.css' />" />
    <
link rel="stylesheet" href="<c:url value='/template/admin/assets/css/ace.min.css' />" class="ace-main-stylesheet" id="main-ace-style" />
    <
link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
    <
link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

   
<!-- jquery -->
   
<script type='text/javascript' src='<c:url value="/template/admin/assets/js/jquery.2.1.1.min.js" />'></script>
</
head>
<
body class="no-skin">
<
div id="navbar" class="navbar navbar-default">
    <
div class="navbar-container" id="navbar-container">
        <
div class="navbar-header pull-left">
            <
a href="" class="navbar-brand">
                <
small>
                    <
i class="fa fa-leaf"></i>
                    Trang chủ
                </
small>
            </
a>
        </
div>
    </
div>
</
div>

<
div class="main-container ace-save-state" id="main-container">

    <
script type="text/javascript">
       
try{ace.settings.loadState('main-container')}catch(e){}
    </
script>

   
<!-- Begin menu -->
   
<div id="sidebar" class="sidebar                  responsive                    ace-save-state">
        <
script type="text/javascript">
           
try{ace.settings.loadState('sidebar')}catch(e){}
        </
script>
        <
div class="sidebar-shortcuts">
            <
div class="sidebar-shortcuts-large">
                <
button class="btn btn-success">
                    <
i class="ace-icon fa fa-signal"></i>
                </
button>

                <
button class="btn btn-info">
                    <
i class="ace-icon fa fa-pencil"></i>
                </
button>

                <
button class="btn btn-warning">
                    <
i class="ace-icon fa fa-users"></i>
                </
button>

                <
button class="btn btn-danger">
                    <
i class="ace-icon fa fa-cogs"></i>
                </
button>
            </
div>
            <
div class="sidebar-shortcuts-mini">
                <
span class="btn btn-success"></span>

                <
span class="btn btn-info"></span>

                <
span class="btn btn-warning"></span>

                <
span class="btn btn-danger"></span>
            </
div>
        </
div>
        <
ul class="nav nav-list">
            <
li class="">
                <
a href="#" class="dropdown-toggle">
                    <
i class="menu-icon fa fa-newspaper-o"></i>
                    <
span class="menu-text">QL bài đăng</span>
                    <
b class="arrow fa fa-angle-down"></b>
                </
a>
                <
b class="arrow"></b>
                <
ul class="submenu">
                    <
li class="">
                        <
a href=''>
                            <
i class="menu-icon fa fa-caret-right"></i>
                            DS bài đăng
                        </
a>
                        <
b class="arrow"></b>
                    </
li>
                </
ul>
            </
li>
        </
ul>
        <
div class="sidebar-toggle sidebar-collapse" id="sidebar-collapse">
            <
i class="ace-icon fa fa-angle-double-left" data-icon1="ace-icon fa fa-angle-double-left" data-icon2="ace-icon fa fa-angle-double-right"></i>
        </
div>

        <
script type="text/javascript">
           
try{ace.settings.check('sidebar' , 'collapsed')}catch(e){}
        </
script>
    </
div>
   
<!-- End menu -->


    <!-- Begin body -->
   
<dec:body/>
    <!-- End body -->

    <!-- Begin footer -->
   
<div class="footer">
        <
div class="footer-inner">
            <
div class="footer-content">
                  <
span class="bigger-120">
                     <
span class="blue bolder">laptrinhjavaweb.com</span>
                  </
span>
            </
div>
        </
div>
    </
div>
   
<!-- end footer -->

   
<a href="#" id="btn-scroll-up" class="btn-scroll-up btn btn-sm btn-inverse">
        <
i class="ace-icon fa fa-angle-double-up icon-only bigger-110"></i>
    </
a>

</
div>

<
script src="<c:url value='/template/admin/assets/js/ace-extra.min.js' />"></script>
<
script src="<c:url value='/template/admin/assets/js/jquery-ui.custom.min.js' />"></script>
<
script src="<c:url value='/template/admin/assets/js/jquery.ui.touch-punch.min.js' />"></script>
<
script src="<c:url value='/template/admin/assets/js/jquery.easypiechart.min.js' />"></script>
<
script src="<c:url value='/template/admin/assets/js/jquery.sparkline.min.js' />"></script>
<
script src="<c:url value='/template/admin/assets/js/jquery.flot.min.js' />"></script>
<
script src="<c:url value='/template/admin/assets/js/jquery.flot.pie.min.js' />"></script>
<
script src="<c:url value='/template/admin/assets/js/jquery.flot.resize.min.js' />"></script>
<
script src="<c:url value='/template/admin/assets/js/bootstrap.min.js' />"></script>
<
script src="<c:url value='/template/admin/assets/js/ace-elements.min.js' />"></script>
<
script src="<c:url value='/template/admin/assets/js/ace.min.js' />"></script>
</
body>
</
html>

2.8 Code của trang home.jsp của admin (admin.jsp nằm trong folder admin)

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<html>
<head>
    <title>Trang chủ</title>
</head>
<body>

<div class="main-content">
    <div class="main-content-inner">
        <div class="breadcrumbs ace-save-state" id="breadcrumbs">
            <ul class="breadcrumb">
                <li>
                    <i class="ace-icon fa fa-home home-icon"></i>
                    <a href="#">Trang chủ</a>
                </li>
            </ul><!-- /.breadcrumb -->
        </div>

        <div class="page-content">
            <div class="row" >
                <div class="col-xs-12">
                </div>
            </div>
        </div>
    </div>
</div><!-- /.main-content -->
</body>
</html>

Follow nhóm zalo, fanpage, facebook cá nhân, group facebook, kênh youtube để nhận các nội dung về lập trình java core, java web hay ho

- Fanpage: XEM TẠI ĐÂY

- Facebook cá nhân: XEM TẠI ĐÂY

- Nhóm Zalo: https://zalo.me/g/hjeert065

- Nhóm học lập trình java core: XEM TẠI ĐÂY

- Nhóm học lập trình java web: XEM TẠI ĐÂY

- Kênh youtube của laptrinhjavaweb: XEM TẠI ĐÂY

 

phone zalo