Giáo trình ứng dụng thiết kế website

Đặ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ệ

Trang 1

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

 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

Trang 2

- 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:

Trang 3

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ênmục' , `slug` VARCHAR(500) NOT NULL COMMENT 'tên chuyên mục khôngdấ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' ,

Trang 4

`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.

Trang 5

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';

Trang 7

/*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.

Trang 8

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>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<title>AdminLTE 3 | Dashboard</title>

<! Tell the browser to be responsive to screen width >

<meta name="viewport" content="width=device-width, scale=1">

Trang 9

<link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">

<! Tempusdominus Bbootstrap 4 >

<link rel="stylesheet"

href=" / /Public/admin/plugins/tempusdominus-bootstrap-4/css/tempusdominus-bootstrap-4.min.css">

<! Daterange picker >

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

<! summernote >

href=" / /Public/admin/plugins/summernote/summernote-bs4.css"> <! Google Font: Source Sans Pro >

<link href="https://fonts.googleapis.com/css?

family=Source+Sans+Pro:300,400,400i,700" rel="stylesheet">

</head>

<body class="hold-transition sidebar-mini layout-fixed">

<div class="wrapper">

Trang 10

<ul class="navbar-nav">

<li class="nav-item">

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

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

</li>

<li class="nav-item d-none d-sm-inline-block">

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

</li>

<li class="nav-item d-none d-sm-inline-block">

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

</ul>

<! SEARCH FORM >

<form class="form-inline ml-3">

<div class="input-group input-group-sm">

<input class="form-control navbar" type="search" placeholder="Search" aria-label="Search">

<div class="input-group-append">

<button class="btn btn-navbar"

<! Right navbar links >

<ul class="navbar-nav ml-auto">

<! Messages Dropdown Menu >

<li class="nav-item dropdown">

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

href="#">

<i class="far fa-comments"></i>

<span class="badge badge-danger badge">3</span>

</a>

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

Trang 11

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

Brad Diesel

<span class="float-right sm

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

</h3>

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

whenever you can </p>

<p class="sm

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

</div>

<! Message End >

</a>

<div class="dropdown-divider"></div>

John Pierce

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

</h3>

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

message bro</p>

<p class="sm

Trang 12

Nora Silvester

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

</h3>

<p class="text-sm">The

subject goes here</p>

<p class="sm

<! Notifications Dropdown Menu >

<li class="nav-item dropdown">

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

href="#">

<i class="far fa-bell"></i>

<span class="badge badge-warning badge">15</span>

</a>

Trang 13

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

<span class="item

dropdown-header">15 Notifications</span>

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

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>

<! Main Sidebar Container >

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

Trang 14

Logo" class="brand-image img-circle elevation-3"

<div class="sidebar">

<! Sidebar user panel (optional) >

<div class="user-panel mt-3 pb-3 mb-3 d-flex">

<div class="image">

<img

src=" / /Public/admin/dist/img/user2-160x160.jpg" class=circle elevation-2" alt="User Image">

</div>

<div class="info">

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

<! Add icons to the links using

the nav-icon class

with font-awesome or any other icon font library >

<li class="nav-item has-treeview">

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

<i class="nav-icon fas

Trang 15

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

<ul class="nav nav-treeview">

<i class="far fa-circle nav-icon"></i>

<p>Thêm</p>

</a>

</li>

Trang 16

</p>

</a>

<p>Thêm</p>

</a>

</li>

<p>Thêm</p>

</a>

</li>

Trang 17

<footer class="main-footer">

<strong>Copyright © 2014-2019 <a href="#">BlogTinTuc</

a>.</strong>

<div class="float-right d-none d-sm-inline-block">

<b>Version</b> 3.0.3-pre

</div>

</footer>

<! Control Sidebar >

<aside class="control-sidebar control-sidebar-dark">

<! Control sidebar content goes here >

Trang 18

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

<! jQuery UI 1.11.4 >

<script src=ui.min.js"></script>

" / /Public/admin/plugins/jquery-ui/jquery-<! Resolve conflict in jQuery UI tooltip with Bootstrap tooltip >

<! Tempusdominus Bootstrap 4 >

Trang 19

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

" / /Public/admin/plugins/tempusdominus-bootstrap-<! Summernote >

<script src=bs4.min.js"></script>

" / /Public/admin/plugins/summernote/summernote-<! overlayScrollbars >

<script

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

<! AdminLTE App >

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

<! AdminLTE dashboard demo (This is only for demo purposes) >

<script

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

<! AdminLTE for demo purposes >

<script src=" / /Public/admin/dist/js/demo.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)

<div class="content-wrapper" style="min-height: 365px;">

<div class="content-header">

<div class="container-fluid">

<div class="row mb-2">

<div class="col-sm-6">

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

chủ</h1>

</div><! /.col >

<div class="col-sm-6">

<ol class="breadcrumb right">

float-sm-<li class=item"><a href="#">Home</a></li>

"breadcrumb-<li class="breadcrumb-itemactive">Admin</li>

</ol>

</div>

Trang 20

<section class="content">

<div class="container-fluid">

<div class="row">

<div class="col-lg-3 col-6">

<! small box >

<div class="small-box bg-info">

<div class="inner">

<h3>150</h3>

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

</div>

<div class="icon">

<i class="ion bag"></i>

ion-</div>

<a href="#" class=box-footer">Chi tiết <i class="fas fa-arrow-circle-right"></i></ a>

<i class="ion stats-bars"></i>

ion-</div>

Trang 21

<i class="ion person-add"></i>

ion-</div>

<div class="small-box bg-danger">

<div class="inner">

<h3>65</h3>

<h4>BÌNH LUẬN</h4>

</div>

<i class="ion pie-graph"></i>

ion-</div>

"small-</div>

Trang 23

Lập trình chức năng đăng ký

v Chuẩn bị

Điều đầu tiên cần chuẩn bị cho trang Blog Tin Tức này đó chính là giao

diện, giao diện đăng ký và đăng nhập chúng ta sẽ để cùng với trang chủ luôn vì vậy chúng ta sẽ xây dựng giao diện trang chủ trước.

Đây là giao diện đã chuẩn bị, các bạn có thể download tại đây Sau khi tải

về, các bạn giải nén được một thư mục blog gồm các file như trong ảnh dưới đây.

Trang 24

v Xây dựng giao diện trang chủ

Sau khi hoàn thành xong bước chuẩn bị ở phần 1, chúng ta bắt đầu đi xây dựng giao diện trang chủ.

Trước tiên cần tiếp tục tạo thêm cho mình các thư mục và file như trong ảnh

dưới đây:

Trang 25

Sau khi tạo xong chúng ta tiến hành thêm các đoạn mã code vào Trước tiên

chúng ta copy các thư mục (css, fonts, img, js, vendor) và file style.css từ thư mục blog chúng ta đã tải và giải nén ở mục 1 vào thư mục Public/client trong project

của chúng ta.

Trang 26

Tiếp theo chúng ta tiến hành format lại file style.css Copy toàn bộ code từ file style.css và paste vào (https://www.cleancss.com/css-beautify/) để format

code Sau khi format xong paste lại vào và sửa ở dòng 2534 và 2536 như sau:

file index.php (blog/index.php), header.php (blog/View/client/layouts/

header.php), footer.php (blog/View/client/layouts/footer.php).

Chèn đoạn sau vào file header.php:

Trang 27

<! Added by HTTrack ><meta http-equiv="content-type"

content="text/html;charset=UTF-8" /><! /Added by HTTrack >

<head>

<meta charset="utf-8">

<meta http-equiv="x-ua-compatible" content="ie=edge">

<title>NewsEdge | Home 1</title>

<meta name="description" content="">

<meta name="viewport" content="width=device-width,initial-scale=1">

Trang 28

</head>

<body>

<div id="preloader"></div>

<! Preloader End Here >

<div id="wrapper" class="wrapper">

<! Header Area Start Here >

<header>

<div id="header-layout1" class="header-style1">

<div class="main-menu-area primarytextcolor header-menu-fixed" id="sticker">

<div class="container">

<div class="row no-gutters d-flexalign-items-center">

<div class="col-lg-2 d-none block">

<div class="logo-area">

<a href="index.html">

<img

src="Public/client/img/logo.png" alt="logo" class="img-fluid">

</a>

</div>

Trang 29

</div>

<div class="col-xl-7 col-lg-6position-static min-height-none">

<div class="ne-main-menu">

<nav id="dropdown">

<a

href="index2.html">Home 2</a>

</li> <li>

<a

</li> <li>

<a

</li> <li>

<a

</li> <li>

<a

</li> <li>

Trang 30

<a

</li> </ul>

<a

href="post-style-2.html">Post Style 2</a>

</li> <li>

<a

</li> <li>

<a

</li> <li>

<a

href="single-news-1.html">News Details 1</a>

</li> <li>

<a

</li> <li>

<a

</li> </ul>

Trang 31

<a

href="archive.html">Archive Page</a>

</li> <li>

<a

href="gallery-style-1.html">Gallery Style 1</a>

</li> <li>

<a

href="gallery-style-2.html">Gallery Style 2</a>

</li> <li>

<a

href="404.html">404 Error Page</a>

</li> <li>

<a

href="contact.html">Contact Page</a>

</li> </ul>

Trang 32

type="text" class="search-input" placeholder="Search "

required="" style="display: none;">

Trang 33

<span></s pan>

</a>

<a href="#"

class="menu-times close">

<span></s pan>

Trang 34

<! News Feed Area Start Here >

<section class="bg-accent border-bottom margin">

<div class="row no-gutters d-flex items-center">

<div class="col-lg-2 col-md-3 col-sm-4col-6">

<div class="topic-box margin">Top Stories</div>

</div>

<div class="col-lg-10 col-md-9 col-sm-8col-6">

<div class="feeding-text-dark">

<ol id="sample" class="ticker">

<li>

<a href="#">McDonellKanye West highlights difficulties for celebritiesComplimentarydecor and

design advicewith

Summit Park homes</a>

</li>

<li>

<a href="#">Magnificent

Image Of The New Hoover Dam Bridge Taking Shape</a>

</li>

<li>

<a href="#">If Obama Had

Governed Like This in 2017 He'd Be the Transformational.</a>

<! News Feed Area End Here >

<! News Info List Area Start Here >

<section class="bg-body">

Trang 35

<ul class="news-info-list text-center md">

<div class="modal fade" id="myModal" role="dialog">

<div class="modal-dialog">

<div class="modal-content">

<div class="modal-header">

<button type="button" class="close"

data-dismiss="modal">×</button>

<div class="title-login-form">Đăng

nhập</div>

</div>

<div class="modal-body">

<div class="login-form">

<form>

<label>Tên đăng nhập

*</label>

<input name="username"

type="text" placeholder="Tên đăng nhập" />

<label>Mật khẩu *</label> <input name="password"

type="password" placeholder="Mật khẩu" />

<div class="checkboxcheckbox-primary">

Trang 36

<input id="checkbox"

type="checkbox" checked>

<label for="checkbox">Nhớ

mật khẩu</label>

</div>

<button type="submit"

value="Login">Đăng nhập</button>

<button class="form-cancel"

type="submit" value="">Hủy</button>

<label class="lost-password">

<a href="#">Quên mật

<div class="modal fade" id="signup" role="dialog">

<div class="modal-dialog">

<div class="modal-content">

<div class="modal-header">

<button type="button" class="close"

data-dismiss="modal">×</button>

<div class="title-login-form">Đăng

ký</div>

</div>

<div class="modal-body">

<div class="login-form">

<form method="post">

<label>Tên đăng nhập

*</label>

<input type="text"

name="username" placeholder="Tên đăng nhập" />

<label>Mật khẩu *</label>

Trang 37

<input type="password"

name="password" placeholder="Mật khẩu" />

<label>Họ và tên *</label> <input type="text"

name="full_name" placeholder="Họ tên" />

<button type="submit"

value="Login" name="signup">Đăng ký</button>

<button class="form-cancel"

type="submit" value="">Hủy</button>

<div class="footer-area-top">

<div class="row">

<div class="col-lg-4 col-md-6 12">

<div class="footer-box">

<h2 class="title-bold-lighttitle-bar-left text-uppercase">Most Viewed Posts</h2>

<ul class="most-view-post">

<li>

<div class="media">

<a href=style-1.html">

Trang 38

<h3

class="title-medium-light size-md mb-10">

<a href="#">Basketball Stars Face Off itim ate Playoff Beard

</div>

</li>

<li>

<a href="#">Basketball Stars Face Off in ate Playoff Beard

Battle</a>

<

/h3>

Trang 39

</div>

</li>

<li>

<a href="#">Basketball Stars Face tim ate Playoff Battle</a>

Trang 40

</span>March 31, 2017</li>

</ul> </div>

<ul class=categories">

Định dạng
Số trang	130
Dung lượng	2,83 MB