Giáo trình Ứng dụng thiết kế Web

Bài 1: Lựa chọn đề tài

1. Khảo sát nhu cầu

Công ty ABC có nhu cầu thuê bạn xây dựng một trang web về tin tức để giới

thiệu các thông tin cũng như các sản phẩm của công ty.

2. Đặc tả bài toán

Nhiệm vụ của bạn cần thiết kế cơ sở dữ liệu và xây dựng website thực hiện

được các chức năng sau đây:

▪ Thiết kế các bảng csdl theo yêu cầu bài toán.

▪ Thiết kế giao diện website

▪ Thiết kế chức năng quản lý người dùng

o Đăng ký

o Đăng nhập

o Đăng xuất

▪ Thiết kế chức năng quản lý chuyên mục

o Thêm chuyên mục

o Sửa chuyên mục

o Xoá chuyên mục

▪ Thiết kế chức năng quản lý bài viết

o Thêm bài viết

o Sửa bài viết

o Xoá bài viết

▪ Thiết kế chức năng hiển thị

o Hiển thị bài viết

o Hiển thị chuyên mục

Yêu cầu kỹ thuật:

- Ngôn ngữ lập trình: HTML, CSS, JavaScript, PHP

- Lập trình hướng đối tượng; Lập trình theo mô hình MVC

Bài 2: Thiết kế Database và xây dựng bố cục website

1. Giới thiệu

Để làm một Blog Tin Tức chúng ta sẽ tạo các bảng

sau: users, categories, posts.

Trong đó:

1. Bảng users: chứa thông tin tài khoản thành viên trong Blog.

2. Bảng categories: chứa các chuyên mục của Blog.

3. Bảng posts: chứa các bài viết của Blog.

Bảng users:

Bảng categories:

Bảng posts:

2. Tạo bảng cho Database

Sau khi bạn tải và cài đặt xong Xammp Server, truy cập vào phpmyadmin để

bắt đầu tạo bảng theo đường dẫn: http://localhost/phpmyadmin/index.php

Bước 1: Tạo một database tên là blog

Bước 2:

Chạy lệnh SQL sau để tạo bảng users:

CREATE TABLE `blog`.`users` ( `id` INT NOT NULL AUTO_INCREMENT ,

`username` VARCHAR(20) NOT NULL COMMENT 'tên đăng nhập' ,

`password` VARCHAR(20) NOT NULL COMMENT 'mật khẩu' , `full_name`

VARCHAR(50) NOT NULL COMMENT 'tên đầy đủ' , `level` INT NOT NULL

DEFAULT '0' COMMENT 'quyền' , PRIMARY KEY (`id`)) ENGINE =

InnoDB;

Chạy lệnh SQL để tạo bảng categories:

CREATE TABLE `blog`.`categories` ( `id` INT NOT NULL

AUTO_INCREMENT , `name` VARCHAR(500) NOT NULL COMMENT 'tên

chuyên mục' , `slug` VARCHAR(500) NOT NULL COMMENT 'tên chuyên

mục không dấu' , PRIMARY KEY (`id`)) ENGINE = InnoDB;

Chạy lệnh SQL để tạo bảng posts:

CREATE TABLE `blog`.`posts` ( `id` INT NOT NULL AUTO_INCREMENT ,

`title` VARCHAR(500) NOT NULL COMMENT 'tiêu đề bài viết' , `slug`

VARCHAR(500) NOT NULL COMMENT 'tiêu đề không dấu' , `view_number`

INT NOT NULL COMMENT 'lượt xem' , `image` VARCHAR(500) NOT NULL

COMMENT 'ảnh' , `summary` TEXT NOT NULL COMMENT 'tóm tắt' ,

`content` LONGTEXT NOT NULL COMMENT 'nội dung' , `category_id` INT

NOT NULL COMMENT 'id chuyên mục' , `user_id` INT NOT NULL COMMENT

'id thành viên' , `date` DATE NOT NULL COMMENT 'thời gian đăng' ,

PRIMARY KEY (`id`)) ENGINE = InnoDB;

3. Xây dựng bố cục thư mục

Trong quá trình xây dựng và phát triển một dự án ngoài việc lựa chọn công

nghệ, lựa chọn các thư viện hỗ trợ... thì việc tổ chức các thư mục, các thành phần,

cấu trúc của project là việc cực kì quan trọng, nó là một trong những công việc cần

phải thực hiện đầu tiên trước khi bạn bắt tay vào việc coding.

Lợi ích của một project có cấu trúc chặc chẽ:

▪ Source code dễ nhìn, dễ hiểu(điều này sẽ rất có lợi cho những người mới vào

sau dễ dàng làm quen với dự án hơn)

▪ Việc quản lý, bảo trì project sẽ trở nên dễ dàng và hiệu quả

▪ Và điều cuối cùng nó sẽ giúp cho project của chúng ta nhìn trờ nên chuyên

nghiệp hơn

Xây dựng bố cục

Trong bài học này chúng ta sẽ bắt đầu xây dựng bố cục thư mục của Blog Tin tức.

Thông thường các project của chúng ta sẽ chia thành các loại như sau:

Trong đó:

1. Folder Controller: sẽ chứa các file có chức năng nhận request từ client, điều

phối các Model và View để có thể cho ra output thích hợp và trả kết quả về

cho người dung.

2. Folder Lib: sẽ chứa nhưng thư viện hoặc những function.

3. Folder Model: chứa các file có chức năng giao tiếp, truy vấn tới sơ sở dữ liệu.

4. Folder Public: chứa hình ảnh, css, font,....

5. Folder View: chứa các file xử lý giao diện.

6. File Index.php: là file chính của của chúng ta, file này có tác dụng nhận các

request để điều hướng đến các View và Controller tương ứng để xử lý.

Bài 3: Lập trình các chức năng

1. Tạo kết nối với CSDL

Tạo kết nối

Đầu tiên chúng ta tạo file Database.php trong folder Model và copy và paste

đoạn code dưới đây:

<?php

class Database

{

public $conn = NULL;

private $server = 'localhost';

private $dbName = 'blog';

private $user = 'root';

private $password = '';

// Hàm kết nối CSDL

public function connect()

{

$this->conn = new mysqli($this->server, $this->user,

$this->password, $this->dbName);

if ($this->conn->connect_error) {

printf($this->conn->connect_error);

exit();

}

$this->conn->set_charset("utf8");

}

{

// Hàm đóng kết nối CSDL

public function closeDatabase()

if ($this->conn) {

$this->conn->close();

}

Gọi hàm kết nối

Sau khi kết nối xong với CSDL, chúng ta viết đoạn code dưới đây vào

file index.php

<?php

require('Model/Database.php');

$db = new Database;

$db->connect();

/*Xử lý các request*/

$db->closeDatabase();

2. Thiết kế giao diện cho trang Admin

Sau khi tạo kết nối với Database thành công, chúng ta bắt đầu thiết kế giao

diện cho trang quản trị Admin

Download template Admin tại đây.

Thiết lập bố cục folder

Sau khi đã tải template, giải nén bằng winrar hoặc 7-zip được

folder AdminLTE-master.

Copy toàn bộ folder dist và plugins trong AdminLTE-master vào thư

mục Public/admin.

Tiếp tục tạo các file và folder như hình vẽ dưới đây:

Thiết kế trang chủ Admin

Sau khi đã tạo bố cục cho trang chủ xong chúng ta bắt đầu tiến hành viết code

cho từng file.

File header.php: copy và paste đoạn code sau vào file header.php (đường

dẫn: blog/View/admin/layouts/header.php)

<!DOCTYPE html>

<html>

<head>

<title>AdminLTE 3 | Dashboard</title>

scale=1">

href="../../Public/admin/plugins/fontawesome-

free/css/all.min.css">

href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicon

s.min.css">

href="../../Public/admin/plugins/tempusdominus-bootstrap-

4/css/tempusdominus-bootstrap-4.min.css">

href="../../Public/admin/plugins/icheck-bootstrap/icheck-

bootstrap.min.css">

href="../../Public/admin/plugins/jqvmap/jqvmap.min.css">

href="../../Public/admin/dist/css/adminlte.min.css">

href="../../Public/admin/plugins/overlayScrollbars/css/OverlaySc

rollbars.min.css">

href="../../Public/admin/plugins/daterangepicker/daterangepicker

.css">

href="../../Public/admin/plugins/summernote/summernote-bs4.css">

<link

href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:30

0,400,400i,700" rel="stylesheet">

</head>

<nav class="main-header navbar navbar-expand navbar-

white navbar-light">

<a class="nav-link" data-widget="pushmenu"

href="#"><i class="fas fa-bars"></i></a>

</li>

</li>

<a href="#" class="nav-link">Contact</a>

</li>

</ul>

<input class="form-control form-control-

navbar" type="search" placeholder="Search" aria-label="Search">

<button class="btn btn-navbar"

type="submit">

</button>

</div>

</form>

<a class="nav-link" data-toggle="dropdown"

href="#">

<span class="badge badge-danger navbar-

badge">3</span>

</a>

<div class="dropdown-menu dropdown-menu-lg

dropdown-menu-right">

<img

src="../../Public/admin/dist/img/user1-128x128.jpg" alt="User

Avatar" class="img-size-50 mr-3 img-circle">

<h3 class="dropdown-item-

title">

Brad Diesel

<span class="float-right text-sm text-

danger"><i class="fas fa-star"></i></span>

</h3>

<p class="text-sm">Call me

whenever you can...</p>

<p class="text-sm text-

muted"><i class="far fa-clock mr-1"></i> 4 Hours Ago</p>

</div>

</a>

<img

src="../../Public/admin/dist/img/user8-128x128.jpg" alt="User

Avatar" class="img-size-50 img-circle mr-3">

<h3 class="dropdown-item-

title">

John Pierce

<span class="float-right text-sm text-

muted"><i class="fas fa-star"></i></span>

</h3>

<p class="text-sm">I got

<p class="text-sm text-

your message bro</p>

muted"><i class="far fa-clock mr-1"></i> 4 Hours Ago</p>

</div>

</a>

<img

src="../../Public/admin/dist/img/user3-128x128.jpg" alt="User

Avatar" class="img-size-50 img-circle mr-3">

<h3 class="dropdown-item-

title">

Nora Silvester

<span class="float-right text-sm text-

warning"><i class="fas fa-star"></i></span>

</h3>

<p class="text-sm">The

subject goes here</p>

<p class="text-sm text-

muted"><i class="far fa-clock mr-1"></i> 4 Hours Ago</p>

</div>

</a>

<a href="#" class="dropdown-item

dropdown-footer">See All Messages</a>

</div>

</li>

<a class="nav-link" data-toggle="dropdown"

href="#">

<span class="badge badge-warning navbar-

badge">15</span>

</a>

<div class="dropdown-menu dropdown-menu-lg

dropdown-menu-right">

<span class="dropdown-item dropdown-

header">15 Notifications</span>

4 new messages

<span class="float-right text-muted

text-sm">3 mins</span>

</a>

<i class="fas fa-users mr-2"></i> 8

friend requests

<span class="float-right text-muted

text-sm">12 hours</span>

</a>

<i class="fas fa-file mr-2"></i> 3

new reports

<span class="float-right text-muted

text-sm">2 days</span>

</a>

<a href="#" class="dropdown-item

dropdown-footer">See All Notifications</a>

</div>

</li>

</ul>

</nav>

<aside class="main-sidebar sidebar-dark-primary

elevation-4">

<img

src="../../Public/admin/dist/img/AdminLTELogo.png" alt="AdminLTE

Logo" class="brand-image img-circle elevation-3" style="opacity:

.8">

<span class="brand-text font-weight-

light">Admin</span>

</a>

<img

src="../../Public/admin/dist/img/user2-160x160.jpg" class="img-

circle elevation-2" alt="User Image">

</div>

<a href="#" class="d-block">Nguyễn Trọng

Chính</a>

</div>

<ul class="nav nav-pills nav-sidebar flex-

column" data-widget="treeview" role="menu" data-

accordion="false">

<!-- Add icons to the links using the

.nav-icon class

with font-awesome or any other icon font library -->

<a href="index.php" class="nav-link

active">

<i class="nav-icon fas fa-

tachometer-alt"></i>

<p>

Trang chủ

</p>

</a>

</li>

<i class="nav-icon fas fa-

copy"></i>

<p>

Chuyên mục

<i class="fas fa-angle-left

right"></i>

<span class="badge badge-

info right">6</span>

</p>

</a>

<a href="#" class="nav-

link">

<i class="far fa-circle

nav-icon"></i>

</a>

</li>

<a href="#" class="nav-

link">

<i class="far fa-circle

nav-icon"></i>

</a>

</li>

</ul>

</li>

<i class="nav-icon fas fa-

copy"></i>

<p>

Bài viết

<i class="fas fa-angle-left

right"></i>

<span class="badge badge-

info right">6</span>

</p>

</a>

<a href="#" class="nav-

link">

<i class="far fa-circle

nav-icon"></i>

</a>

</li>

<a href="#" class="nav-

link">

<i class="far fa-circle

nav-icon"></i>

</a>

</li>

</ul>

</li>

<i class="nav-icon fas fa-

copy"></i>

<p>

Thành viên

<i class="fas fa-angle-left

right"></i>

<span class="badge badge-

info right">6</span>

</p>

</a>

<a href="#" class="nav-

link">

<i class="far fa-circle

nav-icon"></i>

</a>

</li>

<a href="#" class="nav-

link">

<i class="far fa-circle

nav-icon"></i>

</a>

</li>

</ul>

</li>

</ul>

</nav>

</div>

</aside>

File footer.php: Viết đoạn code sau vào file footer.php (đường

dẫn: blog/View/admin/layouts/footer.php)

<strong>Copyright

©

2014-2019

<a

href="#">BlogTinTuc</a>.</strong>

<b>Version</b> 3.0.3-pre

</div>

</footer>

</aside>

</div>

<script

src="https://unpkg.com/ionicons@5.0.0/dist/ionicons.js"></script

>

<script

src="../../Public/admin/plugins/jquery/jquery.min.js"></script>

<script

src="../../Public/admin/plugins/jquery-ui/jquery-

ui.min.js"></script>

<!-- Resolve conflict in jQuery UI tooltip with Bootstrap tooltip

-->

$.widget.bridge('uibutton', $.ui.button)

</script>

<script

src="../../Public/admin/plugins/bootstrap/js/bootstrap.bundle.mi

n.js"></script>

<script

src="../../Public/admin/plugins/chart.js/Chart.min.js"></script>

<script

src="../../Public/admin/plugins/sparklines/sparkline.js"></scrip

t>

<script

src="../../Public/admin/plugins/jqvmap/jquery.vmap.min.js"></scr

ipt>

<script

src="../../Public/admin/plugins/jqvmap/maps/jquery.vmap.usa.js">

</script>

<script

src="../../Public/admin/plugins/jquery-

knob/jquery.knob.min.js"></script>

<script

src="../../Public/admin/plugins/moment/moment.min.js"></script>

<script

src="../../Public/admin/plugins/daterangepicker/daterangepicker.

js"></script>

4/js/tempusdominus-bootstrap-4.min.js"></script>

<script

src="../../Public/admin/plugins/summernote/summernote-

bs4.min.js"></script>

<script

src="../../Public/admin/plugins/overlayScrollbars/js/jquery.over

layScrollbars.min.js"></script>

<script

src="../../Public/admin/dist/js/pages/dashboard.js"></script>

</body>

</html>

File home.php:

copy

và

paste

đoạn

code

sau

vào

file footer.php (đường dẫn: blog/View/admin/pages/home.php)

<h1 class="m-0 text-dark">Trang

chủ</h1>

</div>

<ol class="breadcrumb float-sm-

<li class="breadcrumb-

<li class="breadcrumb-item

right">

item"><a href="#">Home</a></li>

active">Admin</li>

</ol>

</div>

<h4>CHUYÊN MỤC</h4>

</div>

<i class="ion ion-

bag"></i>

</div>

<a href="#" class="small-

box-footer">Chi

tiết

<i

class="fas

fa-arrow-circle-

right"></i></a>

</div>

<div

class="small-box

bg-

success">

<h3>53<sup

style="font-size: 20px">%</sup></h3>