Bài trước chúng ta đã cùng nhau phân tích, xác định các module cần có của website tin tức cũng như tìm hiểu về kiến trúc lập trình tổng quát của hệ thống.

Trong bài này chúng ta sẽ cùng nhau thiết kế database để quản lý dữ liệu cho hệ thống, và xây dựng nguyên mẫu giao diện bằng html/css/js.

#1 Thiết kế database

Diagram

hoc-lap-trinh-java-web

Trong đó

Table Posts lưu trữ các bài viết:

– Post_ID – ID bài viết, tăng tự động, khóa chính.

– Post_Name – Tên bài viết

– Cate_ID – Loại bài viết, khóa ngoại ánh xạ sang bảng Categories

– User_ID – ID của User viết bài (Tác giả), khóa ngoại ánh xạ sang bảng Users.

– Post_Content – Nội dung bài viết.

– Post_Slug – Đường dẫn của bài viết (Ví dụ: http://khanhspring.com/hibernate-native-sql/ thì hibernate-native-sql được gọi là Slug)

– Publish_Date – Thời gian bài viết được publish

– Last_Edit – Thời gian cuối cùng chỉnh sửa bài viết.

– Image – hình ảnh minh họa cho bài viết

– Num_Views – Số lượng xem bài viết.

– Status – Tình trạng của bài viết, đây là trường được ánh xạ sang trường par_code trong bảng App_Params.

Table Pages lưu trữ các page của website (ví dụ: trang about, trang giới thiệu,…).

– Các trường gần như bảng Posts

Table Users lưu trữ danh sách người dùng:

– User_ID – Khóa chính, tăng tự động

– User_Role – Danh sách quyền người dùng, sử dụng để phân quyền.

– Status – tương tự như status của Posts: xác định tình trạng người dùng (ví dụ: không kích hoạt, kích hoạt,…) lấy từ trường Par_Code trong bảng App_Params

Table Categories – Danh sách các thể loại bài viết:

– Cate_ID – khóa chính, tăng tự động.

– Cate_Name – Tên thể loại.

– Cate_Desc – Mô tả (cho phép null)

– Parent_Cate – Thể loại cha (chính là ID của một thể loại khác.)

– Slug – Đường dẫn tắt của thể loại.

– Path – Đường dẫn lần lượt từ thể loại cha tới bản thân thể loại (Ví dụ: thể loại “hoạt hình(id=3)” thuộc thể loại “phim(id=2)”, phim lại thuộc thể loại “giải trí(id=1)” thì path của “hoạt hình” sẽ là /1/2/). Dùng để truy vấn các bài viết theo thể loại.

Table Images – lưu trữ các ảnh được upload lên server(chỉ lưu trữ đường dẫn tới ảnh và một số thông tin của ảnh):

– Image_Guid – đường dẫn tới ảnh.

Table Comments – lưu trữ danh sách các comment:

– Comment_ID – kháo chính, tăng tự động

– Comment – nội dung comment

– User_ID – ID của người comment, khóa ngoại – ánh xạ sang bảng Users

– Status – trạng thái của comment, ánh xạ sang Par_Code của bảng App_Params

– Post_ID – ID của bài viết được comment, khóa ngoại – ánh xạ sang bảng Posts

Table App_Params (Application Parameters) – lưu trữ các tham số, thuộc tính ít khi thay đổi của hệ thống (ví dụ: danh sách các trang thái của bài viết, trạng thái comment,…)

– Par_ID – khóa chính, tăng tự động

– Par_Type – Loại parameter (ví dụ: Par_Type = ‘COMMENT_STATUS’ thì xác định đây là tham số để xác định trạng thái của comment)

– Par_Name – Tên parameter

– Par_Code – Mã số của parameter

– Par_Desc – Mô tả

– Par_Status – trạng thái của parameter này.

– Par_Order – thứ tự sắp xếp của parameter.

– Par_Color – màu của parameter (cho phép null)

* Lưu ý khi tạo database các bạn chọn utf8-unicode-ci để có thể lưu trữ và truy vẫn tiếng Việt không bị lỗi.

Sau đây là đoạn code tạo các table. Các bạn có thể tạo một database và import đoạn code sql này vào

--
-- Database: `javawebdemo`
--
-- --------------------------------------------------------
--
-- Table structure for table `app_params`
--
CREATE TABLE IF NOT EXISTS `app_params` (
`Par_ID` int(10) NOT NULL,
  `Par_Type` varchar(255) COLLATE utf8_unicode_ci NOT NULL,
  `Par_Name` varchar(255) COLLATE utf8_unicode_ci NOT NULL,
  `Par_Code` int(10) NOT NULL,
  `Par_Desc` text COLLATE utf8_unicode_ci NOT NULL,
  `Par_Status` int(1) NOT NULL DEFAULT '1',
  `Par_Order` int(10) NOT NULL,
  `Par_Color` varchar(255) COLLATE utf8_unicode_ci DEFAULT NULL
) ENGINE=InnoDB  DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci AUTO_INCREMENT=2 ;
-- --------------------------------------------------------
--
-- Table structure for table `categories`
--
CREATE TABLE IF NOT EXISTS `categories` (
`Cate_ID` int(10) NOT NULL,
  `Cate_Name` varchar(255) COLLATE utf8_unicode_ci NOT NULL,
  `Cate_Desc` text COLLATE utf8_unicode_ci,
  `Parent_Cate` int(10) DEFAULT NULL,
  `Slug` varchar(255) COLLATE utf8_unicode_ci NOT NULL,
  `Path` varchar(255) COLLATE utf8_unicode_ci DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci AUTO_INCREMENT=1 ;
-- --------------------------------------------------------
--
-- Table structure for table `comments`
--
CREATE TABLE IF NOT EXISTS `comments` (
`Comment_ID` int(10) NOT NULL,
  `Comment` text COLLATE utf8_unicode_ci NOT NULL,
  `User_ID` int(10) NOT NULL,
  `Comment_Date` datetime NOT NULL,
  `Status` int(10) NOT NULL,
  `Post_ID` int(10) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci AUTO_INCREMENT=1 ;
-- --------------------------------------------------------
--
-- Table structure for table `images`
--
CREATE TABLE IF NOT EXISTS `images` (
`Image_ID` int(10) NOT NULL,
  `Image_Name` varchar(255) COLLATE utf8_unicode_ci NOT NULL,
  `Image_Guid` varchar(255) COLLATE utf8_unicode_ci NOT NULL,
  `Image_Desc` text COLLATE utf8_unicode_ci,
  `Upload_Date` datetime NOT NULL
) ENGINE=InnoDB  DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci AUTO_INCREMENT=2 ;
-- --------------------------------------------------------
--
-- Table structure for table `pages`
--
CREATE TABLE IF NOT EXISTS `pages` (
`Page_ID` int(10) NOT NULL,
  `Page_Name` varchar(255) COLLATE utf8_unicode_ci NOT NULL,
  `Page_Content` text COLLATE utf8_unicode_ci NOT NULL,
  `Page_Slug` varchar(255) COLLATE utf8_unicode_ci NOT NULL,
  `User_ID` int(10) NOT NULL,
  `Publish_Date` datetime NOT NULL,
  `Last_Edit` datetime NOT NULL,
  `Status` int(10) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci AUTO_INCREMENT=1 ;
-- --------------------------------------------------------
--
-- Table structure for table `posts`
--
CREATE TABLE IF NOT EXISTS `posts` (
`Post_ID` int(10) NOT NULL,
  `Post_Name` varchar(255) COLLATE utf8_unicode_ci NOT NULL,
  `Cate_ID` int(10) NOT NULL,
  `User_ID` int(10) NOT NULL,
  `Post_Content` text COLLATE utf8_unicode_ci NOT NULL,
  `Post_Slug` varchar(255) COLLATE utf8_unicode_ci NOT NULL,
  `Publish_Date` datetime NOT NULL,
  `Last_Edit` datetime NOT NULL,
  `Image` varchar(255) COLLATE utf8_unicode_ci NOT NULL,
  `Num_Views` int(10) NOT NULL DEFAULT '0',
  `Status` int(10) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci AUTO_INCREMENT=1 ;
-- --------------------------------------------------------
--
-- Table structure for table `users`
--
CREATE TABLE IF NOT EXISTS `users` (
`User_ID` int(10) NOT NULL,
  `First_Name` varchar(100) COLLATE utf8_unicode_ci NOT NULL,
  `Last_Name` varchar(100) COLLATE utf8_unicode_ci NOT NULL,
  `Gender` smallint(1) NOT NULL,
  `Email` varchar(100) COLLATE utf8_unicode_ci NOT NULL,
  `Password` varchar(50) COLLATE utf8_unicode_ci NOT NULL,
  `User_Role` varchar(255) COLLATE utf8_unicode_ci NOT NULL,
  `Bio` text COLLATE utf8_unicode_ci,
  `Ativation_Date` datetime NOT NULL,
  `Avatar` varchar(255) COLLATE utf8_unicode_ci DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci AUTO_INCREMENT=1 ;
--
-- Indexes for dumped tables
--
--
-- Indexes for table `app_params`
--
ALTER TABLE `app_params`
 ADD PRIMARY KEY (`Par_ID`);
--
-- Indexes for table `categories`
--
ALTER TABLE `categories`
 ADD PRIMARY KEY (`Cate_ID`);
--
-- Indexes for table `comments`
--
ALTER TABLE `comments`
 ADD PRIMARY KEY (`Comment_ID`), ADD KEY `Post_ID` (`Post_ID`), ADD KEY `User_ID` (`User_ID`);
--
-- Indexes for table `images`
--
ALTER TABLE `images`
 ADD PRIMARY KEY (`Image_ID`);
--
-- Indexes for table `pages`
--
ALTER TABLE `pages`
 ADD PRIMARY KEY (`Page_ID`), ADD KEY `User_ID` (`User_ID`);
--
-- Indexes for table `posts`
--
ALTER TABLE `posts`
 ADD PRIMARY KEY (`Post_ID`), ADD KEY `Cate_ID` (`Cate_ID`), ADD KEY `User_ID` (`User_ID`);
--
-- Indexes for table `users`
--
ALTER TABLE `users`
 ADD PRIMARY KEY (`User_ID`);
--
-- AUTO_INCREMENT for dumped tables
--
--
-- AUTO_INCREMENT for table `app_params`
--
ALTER TABLE `app_params`
MODIFY `Par_ID` int(10) NOT NULL AUTO_INCREMENT,AUTO_INCREMENT=2;
--
-- AUTO_INCREMENT for table `categories`
--
ALTER TABLE `categories`
MODIFY `Cate_ID` int(10) NOT NULL AUTO_INCREMENT;
--
-- AUTO_INCREMENT for table `comments`
--
ALTER TABLE `comments`
MODIFY `Comment_ID` int(10) NOT NULL AUTO_INCREMENT;
--
-- AUTO_INCREMENT for table `images`
--
ALTER TABLE `images`
MODIFY `Image_ID` int(10) NOT NULL AUTO_INCREMENT,AUTO_INCREMENT=2;
--
-- AUTO_INCREMENT for table `pages`
--
ALTER TABLE `pages`
MODIFY `Page_ID` int(10) NOT NULL AUTO_INCREMENT;
--
-- AUTO_INCREMENT for table `posts`
--
ALTER TABLE `posts`
MODIFY `Post_ID` int(10) NOT NULL AUTO_INCREMENT;
--
-- AUTO_INCREMENT for table `users`
--
ALTER TABLE `users`
MODIFY `User_ID` int(10) NOT NULL AUTO_INCREMENT;
--
-- Constraints for dumped tables
--
--
-- Constraints for table `comments`
--
ALTER TABLE `comments`
ADD CONSTRAINT `comments_ibfk_1` FOREIGN KEY (`Post_ID`) REFERENCES `posts` (`Post_ID`) ON DELETE CASCADE ON UPDATE CASCADE,
ADD CONSTRAINT `comments_ibfk_2` FOREIGN KEY (`User_ID`) REFERENCES `users` (`User_ID`) ON DELETE CASCADE ON UPDATE CASCADE;
--
-- Constraints for table `pages`
--
ALTER TABLE `pages`
ADD CONSTRAINT `pages_ibfk_1` FOREIGN KEY (`User_ID`) REFERENCES `users` (`User_ID`) ON DELETE CASCADE ON UPDATE CASCADE;
--
-- Constraints for table `posts`
--
ALTER TABLE `posts`
ADD CONSTRAINT `posts_ibfk_1` FOREIGN KEY (`User_ID`) REFERENCES `users` (`User_ID`) ON DELETE CASCADE ON UPDATE CASCADE,
ADD CONSTRAINT `posts_ibfk_2` FOREIGN KEY (`Cate_ID`) REFERENCES `categories` (`Cate_ID`) ON DELETE CASCADE ON UPDATE CASCADE;
/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;

#2 Thiết kế giao diện

Dựa vào các module đã xác định từ bài trước mà mô hình dữ liệu vừa được thiết kê như trên. Chúng ta sẽ tiến hành thiết kế giao diện cho website:

Sau đây là hình ảnh các mẫu giao diện mình đã thiết kế dưới dạng các trang html tĩnh với css và js:

Trang Index – danh sách bài viết mới
hoc-lap-trinh-java-web

Trang Single – Hiển thị chi tiết bài viết
web-design-single-page

Trang Admin Thêm mới:
web-design-admin-add-new

Trang Admin Hiển thị danh sách:
web-design-admin-list

Chúng ta chỉ cần một số trang như trên để thực hiện lập trình, bởi vì các trang khác đều có nội dung, bố cục tương tự những trang này.

Các bạn có thể tự tay thiết kế lại các trang này theo ý thích nhưng bố cục các phần nên gần giống như trên, để dễ dàng thực hiện lập trình theo các bài viết tiếp theo.

Đánh giá của bạn
Java Web với JSP/Servlet – Thiết kế database và thiết kế giao diện

Trả lời

Thư điện tử của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *