Tạo bài viết
Đăng ký
04/10/2018, 17:02

[BÀI 33] HƯỚNG DẪN VIẾT MỘT TRANG WEB CƠ BẢN (PHẦN 2: TẠO CHỨC NĂNG ĐĂNG NHẬP)

Trong bài số 32, chúng ta đã cơ bản hoàn tất các cấu trúc file của 1 trang web và giao diện của trang chủ. Ở bài này tôi sẽ hướng dẫn các bạn tạo giao diện trang admin, và viết chức năng đăng nhập theo mô hình MVC hướng đối tượng. Phần 1: tạo giao diện trang admin: Trong thư mục admin/view/ ...

Trong bài số 32, chúng ta đã cơ bản hoàn tất các cấu trúc file của 1 trang web và giao diện của trang chủ. Ở bài này tôi sẽ hướng dẫn các bạn tạo giao diện trang admin, và viết chức năng đăng nhập theo mô hình MVC hướng đối tượng.

Phần 1: tạo giao diện trang admin:

Trong thư mục admin/view/

  • Tôi tạo một thư mục là layout, và trong thư mục layout tôi tạo layout.php, để viết giao diện cho trang admin.
  • Tiếp theo tôi tạo một thư mục login, trong thư mục login tôi tạo 1 file là login.php, trang này là trang giao diện để người dùng đăng nhập.

Kết thúc việc tạo 2 file này tôi có cấu trúc file như sau:

login

Trang admin/view/layout/layout.php tôi viết như sau:

PHP
<?php date_default_timezone_set("Asia/Ho_Chi_Minh"); //gọi controller động: $duongdan_controller=""; if(isset($_GET["controller"])){ $duongdan_controller="controller/controller_".$_GET["controller"].".php"; if(file_exists($duongdan_controller)) include $duongdan_controller; } ?> <!DOCTYPE html> <html> <head> <title>'Trang quản trị'</title> <meta charset="utf-8"> <meta name="viewport" content="awidth=device-awidth, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <link rel="stylesheet" href="public/style.css"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div id="wrapper">   <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">   <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="index.php">'QUẢN TRỊ HỆ THỐNG'</a> </div>     <ul class="nav navbar-right top-nav"> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="glyphicon glyphicon-user"></i> 'Xin chào:&nbsp;Hồ Ngọc Trung'<b class="caret"></b></a> <ul class="dropdown-menu"> <li> <a href="#"><i class="glyphicon glyphicon-list-alt"></i>&nbsp;'Danh sách tài khoản'</a> </li> <li> <a href="#"><i class="glyphicon glyphicon-user"></i>&nbsp;'Hồ sơ cá nhân'</a> </li> <li> <a href="#"><i class="glyphicon glyphicon-plus-sign"></i>&nbsp;'Thêm tài khoản'</a> </li> <li class="divider"></li> <li> <a href="#"><i class="glyphicon glyphicon-off"></i>&nbsp;'Đăng xuất'</a> </li> </ul> </li> </ul>     <div class="collapse navbar-collapse navbar-ex1-collapse"> <ul class="nav navbar-nav side-nav"> <li style="background:#52bc89;color:#fff;"> <a href="#" style="color:#fff;"><i class="glyphicon glyphicon-folder-open"></i>&nbsp;&nbsp;'Danh mục'</a> </li> <li> <a href="javascript:;" data-toggle="collapse" data-target="#demo_dmcc"><i class="glyphicon glyphicon-picture"></i> Banner <i class="glyphicon glyphicon-chevron-down"></i></a> <ul id="demo_dmcc" class="collapse"> <li> <a href="#">'Banner hiện tại'</a> </li> </ul> </li> <li> <a href="javascript:;" data-toggle="collapse" data-target="#demo_dm"><i class="glyphicon glyphicon-picture"></i>' Danh sách khóa học '<i class="glyphicon glyphicon-chevron-down"></i></a> <ul id="demo_dm" class="collapse"> <li> <a href="#">'Danh sách'</a> </li> <li> <a href="#">'Thêm mới'</a> </li> </ul> </li> <li> <a href="javascript:;" data-toggle="collapse" data-target="#demo_dmm"><i class="glyphicon glyphicon-sunglasses"></i>' Dịch vụ của chúng tôi '<i class="glyphicon glyphicon-chevron-down"></i></a> <ul id="demo_dmm" class="collapse"> <li> <a href="#">'Danh sách'</a> </li> <li> <a href="#">'Thêm'</a> </li> </ul> </li> <li> <a href="javascript:;" data-toggle="collapse" data-target="#demo_bv"><i class="glyphicon glyphicon-globe"></i> 'Thông tin về Devpro' <i class="glyphicon glyphicon-chevron-down"></i></a> <ul id="demo_bv" class="collapse"> <li> <a href="#">'Chi tiết'</a> </li> </ul> </li> <li> <a href="javascript:;" data-toggle="collapse" data-target="#demo_a1"><i class="glyphicon glyphicon-camera"></i> 'Thông tin liên hệ' <i class="glyphicon glyphicon-chevron-down"></i></a> <ul id="demo_a1" class="collapse"> <li> <a href="#">'Chi tiết'</a> </li> </ul> </li> <li> <a href="javascript:;" data-toggle="collapse" data-target="#demo_a2"><i class="glyphicon glyphicon-tag"></i> 'Tin nhắn học viên' <i class="glyphicon glyphicon-chevron-down"></i></a> <ul id="demo_a2" class="collapse"> <li> <a href="#">'Danh sách'</a> </li> </ul> </li> <li> <a href="javascript:;" data-toggle="collapse" data-target="#demo_a456"><i class="glyphicon glyphicon-star-empty"></i> Design <i class="glyphicon glyphicon-chevron-down"></i></a> <ul id="demo_a456" class="collapse"> <li> <a href="#">'Để nâng cấp website, liên hệ:'</a> <a href="http://facebook.com/trung.hongoc">'Hồ Ngọc Trung'</a> <a href="#">0969 540 038</a> </li> </ul> </li> </ul> </div> </nav>     <div id="page-wrapper"> <div class="container-fluid"> </div> </div>   </div> </body> </html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
<?php
    date_default_timezone_set("Asia/Ho_Chi_Minh");
 
 
 
 
    //gọi controller động:
    $duongdan_controller="";
    if(isset($_GET["controller"])){
        $duongdan_controller="controller/controller_".$_GET["controller"].".php";
        if(file_exists($duongdan_controller))
            include $duongdan_controller;
    }
    
?>
 
<!DOCTYPE html>
<html>
<head>
    <title>'Trang quản trị'</title>
    <meta charset="utf-8">
    <meta name="viewport" content="awidth=device-awidth, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <link rel="stylesheet" href="public/style.css">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 
</head>
 
<body>
<div id="wrapper">
 
    <!-- start avigation -->
    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="index.php">'QUẢN TRỊ HỆ THỐNG'</a>
        </div>
        <!-- end avigation -->
 
 
        <!-- start top menu -->
        <ul class="nav navbar-right top-nav">
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="glyphicon glyphicon-user"></i> 'Xin chào:&nbsp;Hồ Ngọc Trung'<b class="caret"></b></a>
                <ul class="dropdown-menu">
                    <li>
                        <a href="#"><i class="glyphicon glyphicon-list-alt"></i>&nbsp;'Danh sách tài khoản'</a>
                    </li>  
                    <li>
                        <a href="#"><i class="glyphicon glyphicon-user"></i>&nbsp;'Hồ sơ cá nhân'</a>
                    </li>                        
                    <li>
                        <a href="#"><i class="glyphicon glyphicon-plus-sign"></i>&nbsp;'Thêm tài khoản'</a>
                    </li>
                    <li class="divider"></li>
                    <li>
                        <a href="#"><i class="glyphicon glyphicon-off"></i>&nbsp;'Đăng xuất'</a>
                    </li>
                </ul>
            </li>
        </ul>
        <!-- end top menu -->
 
 
 
        <!-- start menu left -->
        <div class="collapse navbar-collapse navbar-ex1-collapse">
            <ul class="nav navbar-nav side-nav">
                <li style="background:#52bc89;color:#fff;">
                    <a href="#" style="color:#fff;"><i class="glyphicon glyphicon-folder-open"></i>&nbsp;&nbsp;'Danh mục'</a>
                </li>  
                <li>
                    <a href="javascript:;" data-toggle="collapse" data-target="#demo_dmcc"><i class="glyphicon glyphicon-picture"></i> Banner <i class="glyphicon glyphicon-chevron-down"></i></a>
                    <ul id="demo_dmcc" class="collapse">
                        <li>
                            <a href="#">'Banner hiện tại'</a>
                        </li>
                    </ul>
                </li>
 
                <li>
                    <a href="javascript:;" data-toggle="collapse" data-target="#demo_dm"><i class="glyphicon glyphicon-picture"></i>' Danh sách khóa học '<i class="glyphicon glyphicon-chevron-down"></i></a>
                    <ul id="demo_dm" class="collapse">
                        <li>
                            <a href="#">'Danh sách'</a>
                        </li>
                        <li>
                            <a href="#">'Thêm mới'</a>
                        </li>
                    </ul>
                </li>
 
                <li>
                    <a href="javascript:;" data-toggle="collapse" data-target="#demo_dmm"><i class="glyphicon glyphicon-sunglasses"></i>' Dịch vụ của chúng tôi '<i class="glyphicon glyphicon-chevron-down"></i></a>
                    <ul id="demo_dmm" class="collapse">
                        <li>
                            <a href="#">'Danh sách'</a>
                        </li>
                        <li>
                            <a href="#">'Thêm'</a>
                        </li>
                    </ul>
                </li>
              
                <li>
                    <a href="javascript:;" data-toggle="collapse" data-target="#demo_bv"

Trịnh Tiến Mạnh

27 chủ đề

6824 bài viết

Có thể bạn quan tâm
0
Các chủ đề đang được quan tâm
phần mềm lập trình php | lập trình web php + mysql | khóa học lập trình php | tự học lập trình php | học php cơ bản thachpham | Code24h | Cho thuê phòng trọ hà nội | Cho thuê phòng trọ bình thạnh | Cho thuê phòng trọ | Cho thuê nhà trọ
Đăng ký

Đăng ký nhận thông báo

Các bài học thú vị sẽ được gửi đến inbox của bạn

HỖ TRỢ HỌC VIÊN
VỀ CODE24H
HỢP TÁC VÀ LIÊN KẾT
KẾT NỐI VỚI CHÚNG TÔI
TẢI ỨNG DỤNG TRÊN ĐIỆN THOẠI

CCode 24h, code mọi lúc, mọi nơi

© Copy right 2018 - 2024