All language subtitles for 001 Code Home Page for the Website_s Front-End

af Afrikaans
sq Albanian
am Amharic
ar Arabic
hy Armenian
az Azerbaijani
eu Basque
be Belarusian
bn Bengali
bs Bosnian
bg Bulgarian
ca Catalan
ceb Cebuano
ny Chichewa
zh-CN Chinese (Simplified)
zh-TW Chinese (Traditional)
co Corsican
hr Croatian
cs Czech
da Danish
nl Dutch
en English
eo Esperanto
et Estonian
tl Filipino
fi Finnish
fr French
fy Frisian
gl Galician
ka Georgian
de German
el Greek
gu Gujarati
ht Haitian Creole
ha Hausa
haw Hawaiian
iw Hebrew
hi Hindi
hmn Hmong
hu Hungarian
is Icelandic
ig Igbo
id Indonesian
ga Irish
it Italian
ja Japanese
jw Javanese
kn Kannada
kk Kazakh
km Khmer
ko Korean
ku Kurdish (Kurmanji)
ky Kyrgyz
lo Lao
la Latin
lv Latvian
lt Lithuanian
lb Luxembourgish
mk Macedonian
mg Malagasy
ms Malay
ml Malayalam
mt Maltese
mi Maori
mr Marathi
mn Mongolian
my Myanmar (Burmese)
ne Nepali
no Norwegian
ps Pashto
fa Persian
pl Polish
pt Portuguese
pa Punjabi
ro Romanian
ru Russian
sm Samoan
gd Scots Gaelic
sr Serbian
st Sesotho
sn Shona
sd Sindhi
si Sinhala
sk Slovak
sl Slovenian
so Somali
es Spanish
su Sundanese
sw Swahili
sv Swedish
tg Tajik
ta Tamil
te Telugu
th Thai
tr Turkish
uk Ukrainian
ur Urdu
uz Uzbek
vi Vietnamese Download
cy Welsh
xh Xhosa
yi Yiddish
yo Yoruba
zu Zulu
or Odia (Oriya)
rw Kinyarwanda
tk Turkmen
tt Tatar
ug Uyghur
Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated: 1 00:00:01,300 --> 00:00:07,400 In this section, you will learn how to create home page for our Bookstore website 2 00:00:07,900 --> 00:00:13,500 home page is the default page which the customers see when they are visiting the website 3 00:00:13,900 --> 00:00:19,500 As you know, our web application is divided into two parts: the front-end and the back-end 4 00:00:19,900 --> 00:00:22,900 The front-end is for the users or customers 5 00:00:23,100 --> 00:00:27,300 and the back-end is for company's staffs and managers 6 00:00:27,800 --> 00:00:32,900 The homepage we are going to create is the home page of the front-end 7 00:00:33,000 --> 00:00:36,800 so it is called website's home page 8 00:00:37,100 --> 00:00:44,000 And the home page for the back-end is called admin's home page which we create in the next section 9 00:00:44,800 --> 00:00:47,800 Here's our task list in this section: 10 00:00:47,900 --> 00:00:50,960 create website's homepage 11 00:00:52,200 --> 00:00:59,000 we create home page index.jsp and then we create a home page servlet 12 00:00:59,700 --> 00:01:06,000 and we create the header and create the footer 13 00:01:12,200 --> 00:01:16,380 And this is the design our website's home page 14 00:01:17,200 --> 00:01:22,400 it also describes the structure of every web page in our web application 15 00:01:22,600 --> 00:01:30,100 that includes the header, the main content, and footer 16 00:01:30,900 --> 00:01:41,500 The header and footer are common for all pages, but the main content varies depending on every particular page 17 00:01:41,800 --> 00:01:44,500 You see, in the website's home page... 18 00:01:44,700 --> 00:01:51,649 the main content displays new books, best-selling books and most favored books 19 00:01:52,000 --> 00:01:57,020 The header displays company's logo, 20 00:01:57,020 --> 00:02:04,000 a search bar, user's menu and book categories menu 21 00:02:04,700 --> 00:02:09,300 The footer displays copyright information with common pages like 22 00:02:09,300 --> 00:02:15,600 about us, contact us, privacy policy, shipping and delivery 23 00:02:16,100 --> 00:02:22,000 Now, let's create the home page - index.jsp page 24 00:02:23,400 --> 00:02:28,600 okay, so expand the WebContent folder here... 25 00:02:29,200 --> 00:02:34,300 and because we are going to create the home page for the front-end 26 00:02:34,300 --> 00:02:41,500 so we need to create a JSP page in the frontend directory you see here 27 00:02:43,000 --> 00:02:48,890 Right-click -> New > JSP File 28 00:02:51,000 --> 00:02:55,400 and name it as index.jsp 29 00:02:55,800 --> 00:03:00,000 click Finish 30 00:03:01,200 --> 00:03:08,080 Okay, you can see some generated HTML code here... 31 00:03:08,800 --> 00:03:13,000 and we change the title for the home page is: 32 00:03:15,300 --> 00:03:20,000 company name is Evergreen Books 33 00:03:21,900 --> 00:03:23,040 okay 34 00:03:24,300 --> 00:03:25,560 Let's see... 35 00:03:25,800 --> 00:03:29,800 Evergreen Books is the company name 36 00:03:30,000 --> 00:03:32,000 Evergreen Books 37 00:03:32,500 --> 00:03:38,000 Online Bookstore 38 00:03:38,700 --> 00:03:39,440 okay 39 00:03:44,000 --> 00:03:46,620 and we can... 40 00:03:51,900 --> 00:03:55,140 use the

heading tag to... 41 00:03:56,900 --> 00:04:02,060 ...display a test message, okay. 42 00:04:02,300 --> 00:04:04,440 Welcome to 43 00:04:04,500 --> 00:04:07,860 Welcome to Books Store 44 00:04:07,860 --> 00:04:09,200 okay 45 00:04:13,900 --> 00:04:19,000 Now, let's test our web application 46 00:04:25,300 --> 00:04:34,000 so in the Servers view, you can see our Bookstore website project is shown here... 47 00:04:34,000 --> 00:04:37,000 under the Tomcat 9.0 server 48 00:04:37,000 --> 00:04:37,820 okay 49 00:04:38,600 --> 00:04:45,000 Now right-click on the server and Start 50 00:04:55,200 --> 00:04:58,000 Okay, the server is up running 51 00:04:59,900 --> 00:05:04,760 Now we can open an Internal Web Browser... 52 00:05:06,000 --> 00:05:10,400 ...inside Eclipse to test our web application 53 00:05:11,400 --> 00:05:14,500 type web 54 00:05:15,700 --> 00:05:17,700 internal web browser 55 00:05:18,000 --> 00:05:19,800 Open 56 00:05:22,200 --> 00:05:27,500 And now we can type the URL to assess our web application 57 00:05:27,900 --> 00:05:31,520 http://localhost 58 00:05:31,800 --> 00:05:34,920 port number is 8080 59 00:05:34,920 --> 00:05:36,200 and... 60 00:05:36,300 --> 00:05:45,400 our web application name or context root is BookStoreWebsite 61 00:05:45,900 --> 00:05:46,800 Enter 62 00:05:53,200 --> 00:05:54,200 you see 63 00:05:54,900 --> 00:05:58,200 the message 'Welcome to Evergreen Book Store!' 64 00:06:01,200 --> 00:06:02,200 you see... 65 00:06:02,200 --> 00:06:11,000 ...the message of this index.jsp we created before, so... 66 00:06:12,900 --> 00:06:19,140 because our home page for the front-end is under the frontend directory 67 00:06:19,400 --> 00:06:24,360 so we need to specify the frontend 68 00:06:25,000 --> 00:06:26,000 sorry 69 00:06:27,600 --> 00:06:32,440 /frontend/index.jsp here 70 00:06:36,000 --> 00:06:37,060 and you see 71 00:06:37,060 --> 00:06:49,000 the message is 'Welcome to Book Store ' - that's exactly what we have typed in this index.jsp 72 00:06:49,900 --> 00:06:52,240 Welcome to Book Store 73 00:06:55,600 --> 00:07:00,280 We need to delete this index.jsp file 74 00:07:01,700 --> 00:07:05,500 under the WebContent directory 75 00:07:05,760 --> 00:07:06,760 Delete 76 00:07:07,500 --> 00:07:09,000 OK 77 00:07:13,700 --> 00:07:20,200 You can see that is not convenient for customers to visit our website by typing this URL 78 00:07:20,300 --> 00:07:27,600 you want that the customer can assess the website like this 79 00:07:27,700 --> 00:07:33,580 just type the domain name or the website name like this 80 00:07:33,900 --> 00:07:34,800 you see 81 00:07:36,300 --> 00:07:50,200 We have 404 error now because we have deleted the index.jsp under the web application's root directory 82 00:07:50,500 --> 00:07:51,420 no problem 83 00:07:53,400 --> 00:08:06,400 as we will create a home page servlet to redirect the customers to our front-end's home page 84 00:08:07,300 --> 00:08:20,600 our second task is to create the home page servlet that is responsible to redirect the users, the visitors to the index.jsp page 85 00:08:20,900 --> 00:08:27,000 which is inside the frontend directory here... 86 00:08:28,500 --> 00:08:33,900 the reason that we need to put our home page... 87 00:08:33,900 --> 00:08:45,300 under a separate directory because we want to separate files for two parts: admin and front-end 88 00:08:45,340 --> 00:08:46,800 back-end and front-end 89 00:08:46,900 --> 00:08:47,700 you see 90 00:08:48,300 --> 00:08:54,500 to create our home page servlet... 91 00:08:55,400 --> 00:08:59,600 this servlet should be in this Java package: 92 00:08:59,700 --> 00:09:02,900 com.bookstore.controller.frontend 93 00:09:03,000 --> 00:09:05,660 Right click > New 94 00:09:05,800 --> 00:09:06,840 Servlet 95 00:09:07,200 --> 00:09:11,000 okay, and enter the servlet as... 96 00:09:11,500 --> 00:09:14,280 HomePageServlet 97 00:09:14,600 --> 00:09:15,580 okay 98 00:09:17,300 --> 00:09:19,420 No, HomeServlet for short 99 00:09:20,200 --> 00:09:20,800 okay 100 00:09:21,500 --> 00:09:23,480 click Next 101 00:09:25,600 --> 00:09:30,000 and here, the URL mapping... 102 00:09:30,300 --> 00:09:35,120 we edit URL mapping 103 00:09:35,120 --> 00:09:37,450 empty, okay. 104 00:09:38,200 --> 00:09:39,540 just empty 105 00:09:41,000 --> 00:09:42,840 this is forward slash (/) 106 00:09:42,840 --> 00:09:45,940 okay, so click Finish 107 00:09:47,400 --> 00:09:54,040 okay, and you can see the servlet class is generated here 108 00:09:55,600 --> 00:09:57,420 okay let's see... 109 00:10:01,900 --> 00:10:07,800 delete the doPost() method because we implement only the doGet() method 110 00:10:07,900 --> 00:10:09,320 okay 111 00:10:09,900 --> 00:10:12,500 delete all the comments 112 00:10:12,800 --> 00:10:14,300 not necessary 113 00:10:14,300 --> 00:10:15,940 okay 114 00:10:40,700 --> 00:10:42,420 you can see... 115 00:10:42,800 --> 00:10:52,600 this class is annotated with the @WebServlet annotation to indicate that this is a Java Servlet 116 00:10:53,000 --> 00:11:02,200 and the string as the argument for this annotation is the URL pattern 117 00:11:03,900 --> 00:11:07,820 for this servlet, we use the... 118 00:11:08,200 --> 00:11:18,200 we use the empty string to indicate that the servlet will handle the request... 119 00:11:20,800 --> 00:11:28,800 this servlet will handle user's requests to the website's home page 120 00:11:29,400 --> 00:11:36,400 In other words, this servlet - HomeServlet - with the URL mapping an empty string... 121 00:11:37,700 --> 00:11:40,160 will handle... 122 00:11:40,800 --> 00:11:45,000 requests come to the website's home page like this 123 00:11:45,800 --> 00:11:46,560 okay 124 00:11:48,400 --> 00:11:49,780 and in the.. 125 00:11:51,700 --> 00:11:56,000 Now let's try to save the servlet 126 00:11:56,210 --> 00:12:03,040 and you can see a server is automatically restarted 127 00:12:06,500 --> 00:12:09,660 If not, we restart the server 128 00:12:10,300 --> 00:12:11,480 Restart 129 00:12:14,900 --> 00:12:16,060 Now... 130 00:12:16,400 --> 00:12:19,480 Open Internal web browser 131 00:12:20,500 --> 00:12:22,340 and... 132 00:12:22,800 --> 00:12:24,300 hit Enter 133 00:12:24,900 --> 00:12:25,960 and you see 134 00:12:27,200 --> 00:12:31,500 this is the message from the doGet() method of the servlet 135 00:12:32,100 --> 00:12:46,700 so that means this HomeServlet is responsible to handle requests to the website's context root 136 00:12:46,900 --> 00:12:48,180 this is the... 137 00:12:48,300 --> 00:12:49,300 you see 138 00:12:50,800 --> 00:12:53,020 Now we want to.... 139 00:12:53,500 --> 00:12:58,500 redirect the visitors to our index.jsp page 140 00:12:58,900 --> 00:13:01,260 inside the frontend directory 141 00:13:01,260 --> 00:13:02,160 okay 142 00:13:03,200 --> 00:13:06,620 okay, to do so... 143 00:13:08,200 --> 00:13:12,760 we need to obtain a RequestDispatcher from the request 144 00:13:12,760 --> 00:13:20,100 request.getRequestDispatcher() 145 00:13:31,100 --> 00:13:41,520 and the page we want to redirect is the frontend/index.jsp 146 00:13:43,400 --> 00:13:49,760 and assign the returned object as a RequestDispatcher object 147 00:13:49,760 --> 00:13:52,960 RequestDispatcher object 148 00:13:53,800 --> 00:13:55,000 dispatcher 149 00:13:55,200 --> 00:13:56,300 okay 150 00:13:58,800 --> 00:13:59,820 page 151 00:14:03,800 --> 00:14:04,320 and... 152 00:14:04,320 --> 00:14:15,520 dispatcher.forward(request, response) 153 00:14:22,500 --> 00:14:24,400 this can be the renamed... 154 00:14:24,400 --> 00:14:26,940 this is the homepage 155 00:14:26,940 --> 00:14:27,960 okay 156 00:14:34,500 --> 00:14:39,200 okay, you see the server is automatically restarted 157 00:14:39,400 --> 00:14:41,600 the message: Reloading context 158 00:14:41,600 --> 00:14:42,520 okay 159 00:14:42,700 --> 00:14:47,300 Now, open the internal web browser and refresh the page 160 00:14:47,400 --> 00:14:48,600 hit Enter 161 00:14:49,000 --> 00:14:50,400 and you see now: 162 00:14:51,600 --> 00:14:54,000 the message 'Welcome to Books Store' 163 00:14:54,000 --> 00:14:59,500 this is from this index.jsp page 164 00:15:00,200 --> 00:15:03,400 Now let's try to add something 165 00:15:03,400 --> 00:15:04,300 okay 166 00:15:05,900 --> 00:15:10,900 Have a great day 167 00:15:10,900 --> 00:15:12,000 okay 168 00:15:12,200 --> 00:15:14,380 Save this file 169 00:15:15,900 --> 00:15:16,920 and... 170 00:15:17,700 --> 00:15:20,720 Refresh the website 171 00:15:21,900 --> 00:15:22,800 you see 172 00:15:23,200 --> 00:15:28,300 the new message 'Have a great day!' is displayed 173 00:15:29,300 --> 00:15:35,400 the reason we need to have a separate Java class 174 00:15:36,500 --> 00:15:37,580 Java servlet 175 00:15:37,900 --> 00:15:46,800 to handle requests coming to the website's homepage is because ... 176 00:15:47,000 --> 00:15:53,500 ...we want to separate the controller and the model from the view 177 00:15:54,300 --> 00:15:57,180 in MVC model 178 00:15:57,300 --> 00:15:59,760 and as you can see... 179 00:16:00,200 --> 00:16:01,780 in the home page... 180 00:16:02,000 --> 00:16:07,720 we need to connect to the database to get information about the book categories 181 00:16:07,720 --> 00:16:11,400 new books, best-selling books and most favored books 182 00:16:11,600 --> 00:16:13,440 so... 183 00:16:13,900 --> 00:16:16,680 the code to... 184 00:16:19,000 --> 00:16:21,560 the code to do... 185 00:16:22,100 --> 00:16:25,400 to retrieve this information... 186 00:16:25,700 --> 00:16:28,600 ...is in the servlet class 187 00:16:28,780 --> 00:16:33,600 and the view - the JSP page is... 188 00:16:33,900 --> 00:16:37,000 only to display the information 189 00:16:38,600 --> 00:16:43,600 that's why we need to have a separate Java servlet 190 00:16:43,800 --> 00:16:48,000 to handle requests to the home page 191 00:16:49,000 --> 00:16:51,100 okay 192 00:16:51,100 --> 00:16:59,260 let's edit the index.jsp page 193 00:17:02,000 --> 00:17:05,200 using a
tag 194 00:17:05,200 --> 00:17:06,619 okay 195 00:17:08,000 --> 00:17:12,339 align = "center" 196 00:17:14,500 --> 00:17:21,369 This is header 197 00:17:24,599 --> 00:17:25,740

198 00:17:26,400 --> 00:17:28,020 heading 1 tag 199 00:17:32,400 --> 00:17:34,840 this is the header 200 00:17:37,000 --> 00:17:46,200 the header can include logo, search bar, menu 201 00:17:46,800 --> 00:17:53,800 and this is the next part is: This is main content 202 00:17:53,800 --> 00:17:54,620 okay 203 00:17:55,800 --> 00:17:58,539 New books 204 00:18:00,070 --> 00:18:02,180 Best-selling books 205 00:18:06,200 --> 00:18:11,700 and the last section is the footer 206 00:18:13,600 --> 00:18:14,800

207 00:18:14,960 --> 00:18:18,540 This is footer 208 00:18:20,300 --> 00:18:23,000 that includes copyright 209 00:18:23,800 --> 00:18:27,400 about, contacts 210 00:18:30,200 --> 00:18:32,360

211 00:18:33,000 --> 00:18:35,100

212 00:18:36,500 --> 00:18:39,460 heading 3, heading 4 213 00:18:39,460 --> 00:18:41,300 okay 214 00:18:44,000 --> 00:18:52,500 that's similar to the structure of the home page: header, main content and footer 215 00:18:52,800 --> 00:18:58,700 Now, refresh the web page 216 00:18:59,000 --> 00:18:59,920 you can see 217 00:19:00,200 --> 00:19:05,040 this is header, this is content and this is footer 218 00:19:12,800 --> 00:19:23,000 in the main content we have three sections: new books, best-selling books and most favored books 219 00:19:24,600 --> 00:19:26,480

220 00:19:27,300 --> 00:19:29,980 New books 221 00:19:47,900 --> 00:19:51,220 Best-selling Books 222 00:19:54,200 --> 00:20:03,000 and Most favored Books 223 00:20:10,000 --> 00:20:12,360 Now refresh the web page 224 00:20:12,800 --> 00:20:15,540 in the internal web browser 225 00:20:16,200 --> 00:20:17,200 you see 226 00:20:20,300 --> 00:20:23,400 so this is the structure of our home page: 227 00:20:23,500 --> 00:20:28,000 the header, main content and footer 228 00:20:30,200 --> 00:20:38,700 Suppose that we need to have a login page that allows the customer to log in to the website 229 00:20:38,700 --> 00:20:44,940 so I create another JSP page here 230 00:20:45,400 --> 00:20:48,100 login.jsp 231 00:20:48,600 --> 00:20:51,660 click Finish 232 00:20:52,300 --> 00:20:57,720 the login page has similar structure to the home page 233 00:20:58,000 --> 00:21:04,600 except for the main content that displays a login form 234 00:21:05,000 --> 00:21:16,700 so I copy this HTML code from the index.jsp to this login.jsp page 235 00:21:16,900 --> 00:21:22,540 and change the page title to Login 236 00:21:22,700 --> 00:21:24,000 ok 237 00:21:24,900 --> 00:21:26,020 you can see 238 00:21:26,020 --> 00:21:30,600 the header and the footer are the same 239 00:21:31,400 --> 00:21:36,000 the main content is different 240 00:21:36,600 --> 00:21:41,240 for example, we... here in the login page 241 00:21:42,800 --> 00:21:48,369 'Please login' 242 00:21:49,300 --> 00:21:50,300 okay 243 00:21:50,700 --> 00:21:56,500 Now, let's try to assess this login page from the browser 244 00:21:57,450 --> 00:22:00,000 we need to specify the frontend 245 00:22:01,500 --> 00:22:05,100 and login.jsp 246 00:22:06,000 --> 00:22:07,180 you see 247 00:22:09,200 --> 00:22:17,400 this page also has header, footer and only the main content is different 248 00:22:18,900 --> 00:22:22,500 for example, we can create a form here 249 00:22:23,390 --> 00:22:29,680 let's display the input fields for username passwords 250 00:22:29,680 --> 00:22:31,360 type 251 00:22:31,360 --> 00:22:35,980 input type="text" 252 00:22:36,800 --> 00:22:38,000 okay 253 00:22:39,300 --> 00:22:43,120 size is 10 254 00:22:45,000 --> 00:22:46,220 user.. 255 00:22:46,700 --> 00:22:48,280 email 256 00:22:51,500 --> 00:22:52,700 break newline 257 00:22:52,800 --> 00:22:54,680 password 258 00:22:55,900 --> 00:23:02,020 is: input type="password" 259 00:23:02,600 --> 00:23:06,940 size is also 10 260 00:23:06,940 --> 00:23:07,940 okay 261 00:23:09,500 --> 00:23:11,360 and... 262 00:23:12,600 --> 00:23:13,600 login button 263 00:23:13,600 --> 00:23:20,180 input type="submit" 264 00:23:23,000 --> 00:23:26,200 value="login" 265 00:23:26,500 --> 00:23:27,600 okay 266 00:23:31,200 --> 00:23:34,660 let's refresh this page 267 00:23:36,000 --> 00:23:36,920 you see 268 00:23:37,000 --> 00:23:39,880 a very simple login page 269 00:23:40,600 --> 00:23:41,580 okay 270 00:23:44,500 --> 00:23:51,600 you can see login page page and the index - the home page has something in common 271 00:23:56,300 --> 00:24:00,220 it is the header and the footer 272 00:24:00,700 --> 00:24:06,240 so what if we have many JSP files here? 273 00:24:06,900 --> 00:24:15,320 later in the project development we will add more and more JSP files here 274 00:24:15,800 --> 00:24:19,220 so... 275 00:24:20,200 --> 00:24:25,600 we will have duplicate code here - in the header and footer 276 00:24:25,600 --> 00:24:26,600 so... 277 00:24:26,600 --> 00:24:29,620 that's why we need to... 278 00:24:30,200 --> 00:24:33,000 extract the common 279 00:24:34,200 --> 00:24:43,500 the common information in the header and footer into separate JSP files called the header and the footer 280 00:24:45,400 --> 00:24:51,610 so let's create the header JSP page here 281 00:24:52,300 --> 00:24:56,240 name it as header.jsp 282 00:24:56,800 --> 00:24:59,320 click Finish 283 00:24:59,800 --> 00:25:04,760 and create footer 284 00:25:06,800 --> 00:25:11,260 footer.jsp 285 00:25:15,300 --> 00:25:22,800 and the header contains the common code 286 00:25:22,900 --> 00:25:24,360 for example 287 00:25:24,360 --> 00:25:28,340 it is the logo 288 00:25:28,700 --> 00:25:30,000 logo, search and menu 289 00:25:30,000 --> 00:25:34,500 so we copy this here 290 00:25:35,700 --> 00:25:39,080 sorry, I copy from the home page first 291 00:25:39,080 --> 00:25:40,500 okay 292 00:25:43,600 --> 00:25:48,550 copy here and paste into the header 293 00:25:49,500 --> 00:25:50,680 okay 294 00:25:56,600 --> 00:25:57,400 save 295 00:25:57,500 --> 00:25:59,000 okay 296 00:25:59,500 --> 00:26:06,000 and copy the footer section into the footer.jsp page 297 00:26:06,500 --> 00:26:07,720 JSP 298 00:26:08,800 --> 00:26:09,700 okay 299 00:26:09,700 --> 00:26:10,600 you see 300 00:26:12,000 --> 00:26:13,040 footer 301 00:26:13,300 --> 00:26:14,560 header 302 00:26:15,500 --> 00:26:16,800 okay 303 00:26:17,600 --> 00:26:19,760 and in... 304 00:26:20,300 --> 00:26:33,000 JSP page, we can use the JSP directive to include the content of the header and footer pages into the home page 305 00:26:34,500 --> 00:26:44,460 here we replace by the JSP directive 306 00:26:48,000 --> 00:26:51,000 jsp:directive.include 307 00:26:51,600 --> 00:26:52,800 and... 308 00:26:53,120 --> 00:26:56,760 the attribute file is the... 309 00:26:57,500 --> 00:27:03,300 the attribute file is the header.jsp 310 00:27:05,900 --> 00:27:08,780 header.jsp 311 00:27:11,600 --> 00:27:15,000 we do the same for the footer 312 00:27:15,400 --> 00:27:21,400 replace this code with the include directive JSP 313 00:27:21,900 --> 00:27:28,920 jsp:directive.include file="footer.jsp" 314 00:27:31,300 --> 00:27:32,000 okay 315 00:27:35,500 --> 00:27:39,000 and now let's refresh the home page 316 00:27:42,200 --> 00:27:43,920 you see: 317 00:27:47,800 --> 00:27:50,560 header, main content and footer 318 00:27:51,000 --> 00:27:55,000 Now, let's do the same for the login page 319 00:27:56,000 --> 00:28:00,440 copy this header 320 00:28:06,700 --> 00:28:08,000 and footer 321 00:28:13,500 --> 00:28:14,700 Save 322 00:28:17,200 --> 00:28:21,366 Now, refresh the login page 323 00:28:21,600 --> 00:28:22,740 frontend 324 00:28:23,200 --> 00:28:24,900 login.jsp 325 00:28:25,100 --> 00:28:26,740 you see 326 00:28:30,400 --> 00:28:50,000 the user interface remains unchanged but in the code we restructure to have the common code stored in header and footer page 327 00:28:50,300 --> 00:28:51,660 you see 328 00:28:53,400 --> 00:28:58,320 Now, let's update the header page 329 00:29:01,300 --> 00:29:04,260 update the header page with logo, 330 00:29:04,500 --> 00:29:12,000 search box and some user's menus: Sign in, Register and Cart 331 00:29:13,600 --> 00:29:15,920 I have the logo here 332 00:29:15,920 --> 00:29:18,720 you see: Evergreen Bookstore 333 00:29:19,200 --> 00:29:20,160 and... 334 00:29:20,800 --> 00:29:26,100 you see, in the project we have the images directory here 335 00:29:27,300 --> 00:29:32,000 and I copy the logo image to that directory 336 00:29:34,000 --> 00:29:35,400 copy 337 00:29:38,600 --> 00:29:39,900 paste 338 00:29:40,700 --> 00:29:42,440 okay 339 00:29:45,900 --> 00:29:49,300 this is the header.jsp page 340 00:29:52,800 --> 00:29:58,360 there's a
tag to display the logo 341 00:29:58,900 --> 00:30:02,240 using the image tag 342 00:30:03,700 --> 00:30:06,220 image 343 00:30:06,700 --> 00:30:14,200 source src is the path to the logo image 344 00:30:14,600 --> 00:30:21,980 you see, in our project, it is under the images directory 345 00:30:25,200 --> 00:30:33,400 images/BookstoreLogo.png 346 00:30:34,000 --> 00:30:41,000 this path is relative to the JSP files 347 00:30:41,500 --> 00:30:43,000 you see 348 00:30:43,100 --> 00:30:48,000 the header.jsp page is here, and... 349 00:30:49,600 --> 00:30:53,800 the BookstoreLogo image is here 350 00:30:58,900 --> 00:30:59,600 okay 351 00:30:59,700 --> 00:31:04,260 Let's refresh our website 352 00:31:06,200 --> 00:31:07,120 Enter 353 00:31:07,600 --> 00:31:13,680 you see: the logo appears very nice, right? 354 00:31:15,600 --> 00:31:21,260 Next, we add a div section to... 355 00:31:21,700 --> 00:31:26,860 display the search box 356 00:31:27,900 --> 00:31:30,000 search box here 357 00:31:32,300 --> 00:31:37,740 input type="text" 358 00:31:40,300 --> 00:31:43,180 name is keyword 359 00:31:44,200 --> 00:31:46,940 size is about 50 360 00:31:47,900 --> 00:31:49,500 okay 361 00:31:52,300 --> 00:31:55,000 refresh the page 362 00:31:56,300 --> 00:32:01,120 you see, there's a small text box here 363 00:32:01,120 --> 00:32:02,750 this is a search box 364 00:32:03,200 --> 00:32:11,470 that allows the user to type a keyword and search for books in the website 365 00:32:16,700 --> 00:32:17,900 and... 366 00:32:18,200 --> 00:32:22,000 after the text box we have the Search button 367 00:32:22,600 --> 00:32:24,500 search button: you can see here 368 00:32:24,600 --> 00:32:26,040 okay 369 00:32:28,000 --> 00:32:32,460 input type="button" 370 00:32:35,200 --> 00:32:39,660 value is the caption of the button: Search 371 00:32:48,600 --> 00:32:51,800 Now, refresh the web page - home page 372 00:32:52,000 --> 00:32:57,260 and you see: the Search button appears here 373 00:32:57,260 --> 00:33:04,450 And now for the user's menu we have Sign in, Register and Cart 374 00:33:09,900 --> 00:33:14,000 we put the user's menu items here 375 00:33:14,900 --> 00:33:16,420 Sign in 376 00:33:17,400 --> 00:33:20,800 Register and Cart 377 00:33:22,500 --> 00:33:26,800 they are hyperlinks so we use the anchor tags 378 00:33:27,200 --> 00:33:30,410 anchor tag or 379 00:33:33,300 --> 00:33:35,100 reference (href) 380 00:33:40,600 --> 00:33:42,260 Sign in 381 00:33:43,100 --> 00:33:45,500 for example 382 00:33:47,800 --> 00:33:51,400 the URL is relative: login 383 00:33:51,500 --> 00:33:52,700 okay 384 00:33:58,800 --> 00:34:01,700 Save the file, refresh the home page 385 00:34:02,100 --> 00:34:04,840 and you see, the Sign in hyperlink here 386 00:34:05,600 --> 00:34:07,000 click here 387 00:34:07,900 --> 00:34:12,800 it doesn't work because we haven't implemented the login function yet 388 00:34:12,800 --> 00:34:13,719 okay 389 00:34:20,500 --> 00:34:26,000 similarly we do the same for Register and Cart 390 00:34:27,600 --> 00:34:33,000 the URL for Register is register 391 00:34:33,000 --> 00:34:33,900 okay 392 00:34:33,900 --> 00:34:38,400 here is, for example: view_cart 393 00:34:38,400 --> 00:34:39,400 okay 394 00:34:42,900 --> 00:34:44,380 and... 395 00:34:45,199 --> 00:34:48,100 Save the file and refresh the homepage 396 00:34:48,199 --> 00:34:52,739 you can see, we have three user's menu items here: 397 00:34:53,699 --> 00:34:56,199 Sign in, Register and Cart 398 00:34:59,200 --> 00:35:02,240 Now, let's add a... 399 00:35:03,600 --> 00:35:04,600 this character 400 00:35:04,600 --> 00:35:05,960 okay 401 00:35:12,800 --> 00:35:14,500 Refresh 402 00:35:17,400 --> 00:35:24,100 we need to have some spaces between the search bar and the menu items 403 00:35:24,730 --> 00:35:38,000 we use the HTML escape character space ( ) here 404 00:35:39,000 --> 00:35:40,400 Refresh 405 00:35:40,400 --> 00:35:41,780 you see 406 00:35:45,400 --> 00:35:51,320 For the menu that displays the book categories 407 00:35:53,000 --> 00:36:07,000 we will implement later because it requires to connect to the database and retrieve the categories from the database 408 00:36:07,300 --> 00:36:09,000 okay 409 00:36:15,730 --> 00:36:26,400 You can open a web browser - Chrome - and access our web application to see how it looks in Chrome 410 00:36:26,400 --> 00:36:27,400 okay 411 00:36:29,700 --> 00:36:30,760 you see 412 00:36:31,500 --> 00:36:38,000 that looks... pretty nice, right? 413 00:36:39,800 --> 00:36:42,620 Next, let's update the footer 414 00:36:43,200 --> 00:36:46,400 the footer.jsp here 415 00:36:47,500 --> 00:36:48,700 and... 416 00:36:48,800 --> 00:36:53,260 according to the design we have the copyright statement 417 00:36:53,500 --> 00:36:55,000 copyright 418 00:36:55,500 --> 00:37:00,420 by Evergreen books company limited 419 00:37:00,420 --> 00:37:01,600 okay 420 00:37:08,900 --> 00:37:18,000 copyright 2018 421 00:37:19,200 --> 00:37:30,500 When I design this user interface, it was 2017, but now it is 2018 422 00:37:30,800 --> 00:37:32,000 okay 423 00:37:32,300 --> 00:37:41,570 by Evergreen Books Company Limited 424 00:37:45,200 --> 00:37:46,560 okay 425 00:37:48,300 --> 00:37:52,160 and under the copyright statement we have some... 426 00:37:52,160 --> 00:38:01,500 menu items: about us, contact us, privacy policy, shipping and delivery 427 00:38:07,000 --> 00:38:09,720 About Us 428 00:38:10,300 --> 00:38:11,300 okay 429 00:38:11,900 --> 00:38:15,000 Save the file and refresh our web page 430 00:38:17,400 --> 00:38:19,040 you see 431 00:38:19,400 --> 00:38:22,860 the copyright statement here 432 00:38:34,900 --> 00:38:36,740 About Us 433 00:38:37,300 --> 00:38:38,800 okay 434 00:38:42,700 --> 00:38:45,380 URL is about 435 00:38:45,900 --> 00:38:52,000 and the next menu item is... 436 00:38:53,200 --> 00:38:54,500 Contact Us 437 00:38:54,500 --> 00:38:56,420 Contact Us 438 00:38:57,200 --> 00:38:59,000 Contact 439 00:38:59,800 --> 00:39:00,760 okay 440 00:39:01,800 --> 00:39:07,900 the next is Privacy Policy 441 00:39:09,600 --> 00:39:12,000 Privacy Policy 442 00:39:12,500 --> 00:39:16,280 URL is policy 443 00:39:16,900 --> 00:39:18,440 and... 444 00:39:18,800 --> 00:39:26,160 the last menu item is Shipping and Delivery 445 00:39:27,300 --> 00:39:32,000 Shipping and Delivery 446 00:39:34,600 --> 00:39:38,620 shipping 447 00:39:39,000 --> 00:39:40,060 okay 448 00:39:41,200 --> 00:39:46,140 Now let's refresh the home page 449 00:39:46,800 --> 00:39:56,000 and you see, we have the menu items in the footer appears here. very good, right? 450 00:39:59,000 --> 00:40:03,200 you can see: New Books, Best-Selling Books, Most favored Books 451 00:40:03,400 --> 00:40:08,000 is the main content of the home page 452 00:40:08,000 --> 00:40:12,910 is the index.jsp page here 453 00:40:18,000 --> 00:40:22,680 let's add some line breaks here 454 00:40:23,900 --> 00:40:29,380 to see the main content more clearly... 455 00:40:29,600 --> 00:40:33,900 from the header and footer 456 00:40:33,900 --> 00:40:34,700 okay 457 00:40:35,200 --> 00:40:38,720 and refresh the home page 458 00:40:39,900 --> 00:40:42,000 you see 459 00:40:46,400 --> 00:40:49,400 Refresh the home page in Chrome browser 460 00:40:49,400 --> 00:40:50,320 you see 461 00:40:51,300 --> 00:40:55,580 header here, footer here and this is the main content 462 00:40:56,500 --> 00:41:06,300 and let's try to access the login page - login.jsp, and you can see.. 463 00:41:09,500 --> 00:41:12,100 the image doesn't get display 464 00:41:12,100 --> 00:41:14,200 No problem, we will fix this later 465 00:41:14,200 --> 00:41:23,300 but you see: it also has the footer and... 466 00:41:23,400 --> 00:41:25,280 footer and header 467 00:41:25,600 --> 00:41:27,000 okay 468 00:41:32,700 --> 00:41:34,760 so that's... 469 00:41:37,600 --> 00:41:46,000 create the website's home page with the header and footer 470 00:41:46,000 --> 00:41:47,560 very simple, right? 471 00:41:47,700 --> 00:41:59,000 and along the course, we will develop and complete the header the footer and the home page 30554

Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.