Đang tải... (xem toàn văn)
Cuộc sống con người thời hiện đại muốn biết tin tức rất dễ dàng. Chỉ cần cầm trên tay một cái điện thoại hoặc một chiếc máy tính có nối mạng, thì tất cả thông tin cần học, cần biết, và những gì đang hot đang nổi trên thế giới sẽ hiện ra ngay trước mắt mình. Bắt nhịp nhu cầu cần biết thông tin nên nhóm chúng tôi xây dựng một trang web tin tức cho sinh viên. Qua đây các bạn sinh viên sẽ biết những tin tức cần thiết cho mình. Và dưới đây là các bước tiến hành cũng như các cách để xây dựng thiết kế một trang web có đầy đủ các phần cần thiết như: Select, insert, update, delete. Ngoài bốn phần cơ bản trên nhóm chúng tôi còn có thêm phần upload ảnh lên server để tiện cho các quản trị web site dễ dàng chọn ảnh hơn. Tất cả những dữ liệu khi chúng ta Select, insert, update, delete, upload ảnh thì được lưu nơi một cơ sở dữ liệu, ở đây chúng tôi dùng môi trường XAMPP để chạy Apache và Mysql cho trang web. Dữ liệu được lưu trữ trong 1 bảng của phpMyadmin, để rõ hơn xin mời cùng chúng tôi đi tìm hiểu sâu hơn.
I LỜI GIỚI THIỆU: Cuộc sống người thời đại muốn biết tin tức dễ dàng Chỉ cần cầm tay điện thoại máy tính có nối mạng, tất thơng tin cần học, cần biết, hot giới trước mắt Bắt nhịp nhu cầu cần biết thơng tin nên nhóm chúng tơi xây dựng trang web tin tức cho sinh viên Qua bạn sinh viên biết tin tức cần thiết cho Và bước tiến hành cách để xây dựng thiết kế trang web có đầy đủ phần cần thiết như: Select, insert, update, delete Ngồi bốn phần nhóm chúng tơi có thêm phần upload ảnh lên server để tiện cho quản trị web site dễ dàng chọn ảnh Tất liệu Select, insert, update, delete, upload ảnh lưu nơi sở liệu, dùng môi trường XAMPP để chạy Apache Mysql cho trang web Dữ liệu lưu trữ bảng phpMyadmin, để rõ xin mời chúng tơi tìm hiểu sâu Chúng ta bắt đầu vào việc xây trang website với nội dung mang tin tức đến với sinh viên có tên là: “Báo sinh viên” II MỤC TIÊU CỦA ĐỒ ÁN Áp dụng kiến thức học lớp ngôn ngữ lập trình Nodejs sở liệu Mysql, từ nhóm chúng tơi định Xây dựng trang web báo sinh viên nhằm cung cấp thơng tin xác cho bạn học sinh, sinh viên III XÂY DỰNG MƠ HÌNH CỦA ỨNG DỤNG 3.1 Cấu trúc ứng dụng Hình 3.1 Cấu trúc ứng dụng 3.2 Cơ sở liệu Cơ sở liệu mysql nhóm em có bảng: tin.sql Trong bảng tin.sql gồm có trường: id, title, urlhinh, dest, content Trong website dùng môi trường Xampp giới thiệu Ở phpMyadmin tạo database có tên “bao”, database “bao” tạo bảng có tên “tin” ứng với mã đối chiếu “utf8_unicode_ci” nhằm để hiển thị nội dung tiếng việt Tiếp đến bảng “tin” tạo cột bao gồm: cột ID dùng để làm ID khóa cột dùng định dạng kiểu “int”, cột “title” dùng để lưu nội dung tiêu đề báo, cột “urlhinh” dùng để lưu tên ảnh viết báo, cột “decst” dùng đê lưu nội dung mô tả báo, cuối cột “content” cột lưu trữ nội dung báo Các cột loại trừ cột ID theo kiểu định dạng kiểu “varchar” Hình 3.2: Bảng sở liệu 3.3 Các câu lệnh Mysql sử dụng a SELECT * FROM tin Câu lệnh dùng để hiển thị hình thơng tin trang chủ trang manager b INSERT INTO tin Câu lệnh dùng để thêm thông tin vào trường bảng c SELECT * FROM tin WHERE id= Câu lệnh dùng để chọn nội dung trường có id hiển thị d UPDATE tin SET Câu lệnh dùng dể update(chỉnh sửa) lại thông tin trường bảng dựa vào id e DELETE FROM tin WHERE id= Câu lệnh dùng để xóa nội dung trường có id IV XÂY DỰNG ỨNG DỤNG SAU KHI ĐÃ CĨ MƠ HÌNH: 4.1 Các chương trình cho phần server chạy nodejs 4.1.1 Cài đặt modunle: - Để xây dựng APP Báo chung ta cần cài đặt module sau: + Tạo projects câu lệnh: npm init Hình 1.1: Hình cài đặt Init + Cài đặt thơng tin Projects: Hình 1.2:Thơng tin projects + Cài đặt thư thư viện: Express, body-parser, mysql Ejs câu lệnh: npm install express body-parser mysql ejs multer Hình 1.3: Cài đặt Express, body-parser, mysql Ejs 4.1.2 Thiết lập file index.js Tạo file có tên: index.js - khai báo thư viện - khai báo port Hình 2.1.1: Khai báo thư viện Tạo kết nối với database để lưu liệu : Hình 2.1.2: Kết nối với database Kết nối kiểm tra kết nối đến database thông báo trước chạy trang web Hình 2.1.3: Kiểm tra kết nối đến database Phần duyệt trang web ejs, trang trang giao diện trang web, thơng tin hiển thị báo nằm trang Hình 2.1.4: Duyệt trang web ejs Duyệt trang manager, trang trang quản lý trang báo, trang update delete bai viết Hình 2.1.5: Duyệt trang manager Khi muốn thêm viết ta phải có trang riêng để thêm viết đoạn code duyệt trang add báo mới: Hình 2.1.6: Duyệt trang add Bắt kiện nhập liệu vào ô nhập để lưu database trang thêm báo mới, có trường nhập tiêu đề báo, ảnh đại diện cho trang báo, mô tả ngắn trường nội dung trang báo, cách khai báo lấy đường dẫn đây: Hình 2.1.7: Lấy liệu ô nhập insert liệu database Sau thêm liệu, muốn thay đổi liệu ta vào trang update để chỉnh sửa liệu trang báo Để duyệt vào trang update có đoạn code duyệt trang trỏ đến đối tượng cần duyệt sau: Hình 2.1.8: Update liệu trang báo Sau duyệt trang update mở trang cho chỉnh sửa trang báo, thông tin chỉnh sửa thay đổi lưu vào database cách sau: Hình 2.1.9: Chỉnh sửa liệu Để xóa trang báo phải duyệt trang xóa xóa trang báo khỏi database có đoạn code sau: Hình 2.1.10: Delete trang báo muốn đọc báo có nội dung đầy đủ ta duyệt trang đọc báo để hiển thị nội dung bao gồm hình ảnh báo, tiêu đề nội dung Hình 2.1.11: Đọc tất nội dung báo Phần cuối dùng để up hình ảnh lên server, nội dung code khai báo ví trí upload thơng tin upload Hình 2.1.12: Upload hình ảnh 4.2 Thiết kế giao diện chương trình HTML CSS Phần HTML CSS Phần HTML trang chủ: Hình 2.1: HTML trang chủ Phần CSS trang chủ: Hình 2.2: CSS trang chủ Phần HTML trang bao-manager: Hình 2.3: HTML trang manager Phần CSS trang bao-manager: Hình 2.4: CSS trang bao-manager V Kết sau xây dựng chương trình 5.1 Khởi động Server Hình 5.1: Khởi chạy server 5.2 Giao diện sau chạy chương trình: Trang chủ trang hiển thị tất tờ báo có trang báo, trang chủ trang báo mà nhóm chúng tơi tạo nên Hình 5.2: Trang chủ trang báo Sau vào trang chủ thấy xuất tất trang báo, muốn đọc trang báo cần rê chuột kích vào trang xuất trang mới, bao gồm đầy đủ nội dung chi tiết trang báo có thơng tin Chúng ta có giao diện sau: Hình 5.3: Giao diện trang đọc báo website Hai trang trang khách hàng người dùng sử dụng, trang quản trị viên Trang chứa tất thông tin viết trang báo Ở trang chỉnh sử trang báo, xóa trang báo, thêm trang báo Hình 5.4: Giao diện trang manager trang báo Từ trang quản lý ta vào trang thêm viết mới, trang có nhập trường liệu ô nhập tiêu đề, ô nhập mô tả viết, nhập nội dung trang báo Và có chọn file ảnh viết để upload lên trang web Hình 5.5: Giao diện trang thêm báo Khi thêm viết xong, sau nhấn nút Insert tự động trang web điều hướng lại trang manager Ở chúng t tiếp tục chỉnh sử viết có sai hay thiếu sót Để vào trang nhấn Update xuất trang web hình dưới: Hình 5.6: Giao diện trang update Tiếp tục, chỉnh sửa xong nhấn Update trang web tự điều hướng lại trang manager Ở trang xóa viết, cách nhấn vào chữ delete cột thao tác phía bên phải nội dung báo Khi thao tác nhấn delete liệu database đồng thời bị xóa, trang manager khơng hiển thị viết bị xóa Hình 5.6: Giao diện trang upload ảnh Giao diện dùng để upload hình ảnh: click chọn tệp sau nhấn upload hình ảnh hình ảnh up lên server VI KẾT LUẬN: Vậy qua đồ án này, biết cách tạo trang quản trị báo, có phần chủ yếu như: tạo viết mới, chỉnh sửa viết, xóa viết chọn viết Đó cốt gọi quản trị website phải khơng? Từ xây dựng lên nhiều Chức khác cho hồn hảo bảo mật VII TÀI LIỆU THAM KHẢO: Khoapham.vn Github.com