Hello everyone. Uh welcome again. And this is the continuum of the application development series and this is the fifth video and I'm gonna
cover in this with the home page. So how to complete this home page
And the next thing till now we have covered the technology interaction
we create a project header and footer. So in the last tutorial also we have just designed the header and footer and you can also
see the output here, the head part and the footer part. Now we see how can we edit slider and design a home page of
the application. So to design the homepage application, there are two things we can add some uh slides there
we can add some background images. So we'll see both of both the example today and uh to add the slider again
we need CS S and um CS S and html knowledge. So I hope you are familiar with this
So I have prevailed code here. So I'm gonna just use this slider code and I'm going to show you how can you implement using
this code? So we already included the header and footer file and this is my slider
I can put this code in a single file and include that. Also
I can directly uh put that code in the welcome page. So let's see
I want to just copy this code. OK? And let's switch to my ID
and open the index to TSP file and then under my body part till now
Uh Right now I'm displaying this message. So before this message, I'm gonna use this code
I just control inter uh control, OK
I just enter control shift F to format the code and not and I will format and now uh I need
some images here, some slider images for example. So let's download some slide
images. Uh I'm using this is for the tutorial purpose or learning purpose
So if you want to use or download any file from the internet
you make sure about the copyright issue. So slide uh not
landed. OK
So what the OK
Now we have that sliding images. So let's download some image and use them
And so I want to create a folder at the desktop that will contain all the images
Yeah, medication and thats called image. And
I'm gonna use it to save it as a one spng. It will be good if you uh use all the same format
So I need the MNL JP G format. It's in the JP G name it as the one JP
D OK. And download the mobile. It says the two game
two. It's OK. And let's download one background image. So
for the example, they need image. Let's use this. No. Yes
Uh OK. Let's use this as a background image. So
we have downloaded, we have three emails in our desktop and now we need to create a slider and um I'm like the only the
only. So let's rephrase the page as we add the code. Uh you can see the icon here but the image is not disciplined
because the image is not available there. So how can we add this
Just open the existing folder where you have images? So in my case
I have this in the java this folder and I'm gonna use this one and two images for the slider
You can use more images, but I'm using only two. So I'm going to repeat them
I just copied the images in this image folder. Now you can see here in the image source
I need to pass the part of the image. So already the images in the the the project name
So my name, in my case, the project name is on that application and you can see the folder image
It's right and I need to pass the image name like this same source
Uh So same source of the image I can use in all the three text
So let's see here. OK. So I'm gonna just change it here too
They may name I think it should be work. Now let's see and rephrase the page
You can see the slider is there and the images is added eight
So this happening like uh the designing is going out or like wide and small because of the MS size
If you wanna fix the MS size, you can fix it. Like if I use like
I I want to fix the height, it should be 200 pix sir
but I can say 300 pix sir. And the same way I'm gonna use same height
I'm gonna use it all it. What's this? Let's see it. Now
you can see now all the images are in the fixed size, which is T MA
So this is the welcome page and it's like the and the welcome message is there
And also if you want to add some padding there, like it's not looking good
So if you want to add some padding in the welcome message, just put it in line CS s there for now
we didn't create a style file separately. So I'm going to use, I'm going to pass a style CS S in line CS s fing
I'm gonna pass uh bedding and it should be 50
pixel. I see I could. So whenever you make any changes in the CS S and you didn't
find changes, just rephrase the page as a hard or you can use control F five from your keyword
And you can see now that slider I did and that's good
The images is up to you, you can check it. And now if I click on the home page
now let's add a background image. Does you create a new page or you can say this will be your home page
So let's create another JSP file and name as, as a home page should be A I created
this video and I need uh also headed in footer, header and footer will be common for all the pages
So I need header and footer here also. So I just copied this include footer and
like showing me that right. OK. This time uh this in this
this uh folder is this file is available in the same folder like the home uh JSP is available in the same folder under the
JSP. So we don't need to pass the complete part of this uh uh in the index
It was outside. That's why I passed the complete part of the OK
Cool. So also in the same way we can use the hater
So before body, I'm going to use this header part. What's that
Also, we can remove the stick because it will come from the he he do p now between
the body. For example, I need to add some text or something
Let's see. Uh let's say some text and see the example which one take and under that is gonna take
Uh This is your welcome page, your home page. It's not a welcome page
Home page and oh, let's turn it and
OK, we need to link this page also. So to link this page
we can pass the directly URL also. We can use controllers or some URL things
So let me show you one other way to add them. I'll, I'll show you the things later for now
We can add it directly. Just go to the header page and uh the header page we need
Yeah. And the, and then in, in this home page where I need to put the project name
project name slash folder name JSP and another JSPP have that homepage eight
So I can link it to the home note that should open
OK, to the face. Oh It's showing the the page so we can remove the public page name like this
I need this. OK. Correct. OK. You can see this is your home page
when I'm now I'm, when I click on this home page is showing me yes
OK. So when I click this
showing me like this and again, right now the controller is on the home page and when I click on this home
page, it will add in the JSP again and again. So I think we need to remove this
Uh I I will show you the proper uh form to manage this home page
Uh So the navigation part, so it will be easy. We need to create a variable and controller for this
It will be good to manage the things. But for now, I'm just using a static part here as a project name
So go to home page. Wait a second. Yeah, let's
see. Uh Now how can we add the background image, the main name to add the um to add a background image here
So the next thing it's a mow. So create a CS S the very first step we need to create a CS
S. So just go to the right click on the CS S folder and create a file which is called a style load CS S
under. This is T CS A, I'm gonna show you some code, you can directly put it there and create some custom CS S to
design a division or contain container. So this is a code and what
this code is going to set like we are going to set a background image in this home contained ripper glass
So it's contained A U I and the page URL or you can see the URL of that image
So we need a background image now. So let's go to our folder
copy this background image and pass this image under our image folder
I'm gonna pass it right here and now I need to part of this image
So for example, it's already in the image folder. So image dot image slash name of image is Mac dot J Pe
OK? That's fine. And the other class is overlay box, whatever it takes to be on a show over the image
So this class will manage it and this is a container and the welcome test color and phone size and all these things
Now, now I moved to the Hon JSP and create a division and add that
image and call it CS S Yeah, let's see. Uh your creator
Yeah, so we are calling that glass home container uh home contain uh repla here Also the O lift and the container
from the style of CS S. And this is a welcome message
So we can see very phone too. Welcome to our application. No
Ja Yeah. And
and now we are using these glasses but it did not, we didn't link this style of CS S
So we have to link this. So we have two ways we can use
we can include it here. Also, we can include in the header because we are every file we are including the header
So it will be good if you are going to add them. And is it um in the Heath
So I use the link and this link going to be elective go on the style
of CS S and I see it and the source. So
it's under my CS S folder. So I need to file the part of the CS S CS S and child
of Jesus. The give
me the directory. Let's see if it is not worth it. Style Lord Jesus
Mhm Mhm You see that. Now let's replace the page and check the output for the home page as well
So you can see the messages there. But I think the CS S is not including
let me check it. So this is
our CS S folder and if you want to book this year
look, you say yes and
so we go there. Ok, let
me do it a home that VHS and we need it. OK
Now you can see the CS S is working actually. Uh this is the folder in path issue and like we are using uh we
are using CS S and the home page and your home is already under this web and in the Bell of CS S folder
So that's why I just take it back a step back. So by using the two dots
you can go a step back and the CS is deployed and now we need to add a background but it's not our background
So I think the image is not there. So let me show you how the image is not working as they A
CS is, I think OK, the big ground I imagine is not there
I see why it's not coming. And so
OK, the F the name is image. So you missed the name
Now we move to the browser and next is the browser that should be here and it's not coming
Let me check it again and pass the complete URL and it will come there
OK? I lost it. Let's run it again and until this OK
And you can see that this cookies issue and I rephrase it and the same issue
I just take a step back here. I use two dots images like uh it's going to be a step back
So the current location of this is the image. So um it will take a step back and go to then uh take a step
back. It means it will come in under the back folder. Then you come to the image and grab that file back towards you busy
and you can see the background image here and it's showing welcome to the web application so it can be a web application or anything
So OK, it's really cool. And now you have that background image
the slider also and this imagine. So if you want to go to see your slider just open this
so you can see the slider here. So by this way, you can
add the things and the design is complete now for the home page and the basic design and now we
are ready to move for the registration and login process. And if you have any question
you can comment me all the questions. Uh We'll try to solve it and we'll provide the link this links in the description box
So you can also grab it right now. This background image code is not there
And this link have let it and you can use it. So thank you. So Mr Du