Build A Dental Website With Python and Django | John Elder | Skillshare

Build A Dental Website With Python and Django

John Elder, Learn To Code!

Build A Dental Website With Python and Django

John Elder, Learn To Code!

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
35 Lessons (3h 3m)
    • 1. Introduction

    • 2. Install Python

    • 3. Install The Sublime Text Editor and Git Bash Terminal

    • 4. Set Up A Virtual Environment

    • 5. Install Django and Start Our Project

    • 6. Run the Django Server

    • 7. Start a New Django App

    • 8.

    • 9. Build our First Webpage

    • 10. Download the Dental Template

    • 11. Create The Static Directory

    • 12. Install the Dental Template

    • 13. Add Static Tags to The Template

    • 14. Tweak Our Static Tags (part 2)

    • 15. Tweak Our Static Tags (part 3)

    • 16. Building Django Links

    • 17. Tweak The HTML Template

    • 18. Add Custom Images

    • 19. Add A Video

    • 20. Contact Page

    • 21. Change The Contact Page Map

    • 22. Build The Contact Form

    • 23. Build The Contact Form (part 2)

    • 24. Send Email With Django

    • 25. Send Email With Django (part 2)

    • 26. Send Email With The Development Sendmail Server

    • 27. Create an Email Response Page

    • 28. Version Control With Git

    • 29.

    • 30. Intro To Heroku For Webhosting

    • 31. Install The Heroku Toolbelt

    • 32. Install Modules For Heroku

    • 33. Heroku Changes

    • 34. Push Our Code To Heroku

    • 35. Add A Domain Name

  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.





About This Class

In this course you'll learn to build websites with Python and Django by building out a cool and professional Dentist website! Why a Dental website?  Many coders want to become freelance web developers, and what better way to get gigs than by building websites for all the Dentists in your area! 

In this course you'll learn to build websites fast using free HTML templates.  We'll download a dental template for free and then customize it to suit our needs. 

You'll learn to...

  • Install Python

  • Install The Sublime Text Editor and Git Bash Terminal

  • Set Up A Virtual Environment

  • Install Django and Start Our Project

  • Run the Django Server

  • Start a New Django App

  • Urls .py

  • Build our First Webpage

  • Download the Dental Template

  • Create Static DIRS

  • Install the Dental Template

  • Add Static Tags to The Template

  • Tweak Our Static Tags (part 1)

  • Tweak Our Static Tags (part 2)

  • Tweak Our Static Tags (part 3)

  • Building Django Links

  • Tweak The HTML Template

  • Add Custom Images

  • Add A Video

  • Contact Page

  • Change The Contact Page Map

  • Build The Contact Form

  • Build The Contact Form (part 2)

  • Send Email With Django

  • Send Email With Django (part 2)

  • Send Email With The Development Sendmail Server

  • Create an Email Response Page

  • Version Control With Git

  • Github . com

  • Intro To Heroku For Webhosting

  • Install The Heroku Toolbelt

  • Install Modules For Heroku

  • Settings .py Heroku Changes

  • Push Our Code To Heroku

  • Add A Domain Name

This is a really fun course with a cool project! When we're finished you'll have a nice website to add to your portfolio!

See you inside!

-John Elder

Meet Your Teacher

Teacher Profile Image

John Elder

Learn To Code!


HI!  My name is John Elder and I teach people to code online!  I have several Amazon #1 Best-Selling coding books, and my video courses have been viewed by over 2 million people around the world.  

See full profile

Class Ratings

Expectations Met?
  • Exceeded!
  • Yes
  • Somewhat
  • Not really
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Your creative journey starts here.

  • Unlimited access to every class
  • Supportive online creative community
  • Learn offline with Skillshare’s app

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.



1. Introduction: All right. Welcome to the course. My name is John Elder from coding we dot com and I'll be your instructor today. In this video, I want to spend just a couple of minutes talking about what you can expect from the course how it's laid out and what we're gonna be doing. So this is the website. We're gonna be building this cool dental website. See, it's got all kinds of neat things. Looks very professional. And I think you're gonna be surprised just how quick and easy it is to build this thing out once we get going. So Okay, you're probably not a dentist. Why in the world would you want a dental website? Well, maybe you want to be a freelance web developer. Maybe you want to go around your town and sell your services to potential customers. Build websites around your local community. You probably have dentists in your area. They might need a website. Boom. Here we go. So you can use what you learned in this course to apply to any sort of theme or template id website. In this case, we're gonna be using a template to build this dentist website a dental template. There are just tons of templates out there for any kind of industry you may want to build a website for, And once you understand the basics of building this website, you'll be able to use those exact skills for any kind of template out there s so it should be pretty cool. So in this video, like I said, I just want to sort of say hello, Introduce myself. Talk a little bit about what shooting what you can expect. One thing I want to say is, if you have questions along the way, absolutely feel free to ask them. That's what I'm here for. I do this full time. I'm here answering questions. You can post your questions. I try to answer them as soon as I As soon as I see them, it's often within an hour or two. Sometimes it's right away if I happen to be staring at the thing and it pops up, but usually within an hour or two, definitely within the same day. I am in Las Vegas, which is Pacific time, so if you're on the other side of the world, it's during the day. Obviously, I'm back home sleeping. So keep that in mind as faras response times go on the weekends. I try and check in from time to time and answer questions if they pop up. But you know, it's the weekend, so I'm out doing weekend the things so it might be a little longer between response times. But like I said, I try and get in and answer questions throughout the day. One, if I can, or at least that the end of the day or the beginning of the day or, ah, you know, however that goes so ah, you don't need any special skills or special tools In order to take this course in the next couple of videos, we're gonna download free tools, all the things we actually need in order to start building this website. All the programming language, the supplying text editor that get bashed terminal, all those good things and should be a lot of fun. So this course is laid out in a specific order, so you really sort of need to start from the beginning and go all the way through in the same order. This is not really the kind of course we can hop around and watch different videos from different sections. Unless you're already experienced with programming and Django, then you can, you know, sort of skip some of the intro stuff If you already know how to download the tools. Obviously you can You can sort of skip that. But for the most part, you're gonna want to start at the beginning and just go all the way through. So all right, let's get started. In the next video, we'll start to download and install the tools that we need specifically python. 2. Install Python: Okay, First things first. We need to download and install Python, so I'm on a Windows computer. Hopefully, you are, too. If you're on a Mac, this is gonna be slightly different. I'll talk about that as we go forward. So the first thing we want to do is just head over to Google and just got a python dot org's. This is the official Python website, and if you kind of hover over this download tab, you'll see the download for Windows. Now it already knows I'm on a Windows computer. If you're on a macro Lennox computer, it's gonna likely show you the download for those Mac and Linux is often come with Python, but it's an old version of python, so you definitely need to install and use the latest version, Python three or above. So check this out. It says Python, 3.8 point one. It's likely gonna change by the time you watch this video. So if it's a different version, that doesn't matter at all. Just go ahead and download and install the latest version, whatever it ISS. So we could just go ahead and click this to save it, and we can save this anywhere on our computer. I'm gonna save it to my desktop. So it's just easy to find. I've actually already got it on there, so I'll downloaded again. But I'm on Firefox and downloads appear in this little blue arrow in the top right corner for Firefox. If you're on like the chrome web browser you're downloads, they're gonna peer down here in the lower left hand corner. So wherever your download is where you can navigate to your desktop on your computer and click it there, I just go ahead and click this. So I'm gonna open this and this is the installation screen you'll see notice it's 32 bit. Now. A lot of you guys are gonna be like I've got a 64 bit computer. How come it's not 64 bit? Trust me, the 32 bit is the standard version of Python. It's the one you want. There is a 64 bit version, but you don't want it. You just don't just trust me on that. I'm not gonna get into why the 32 bit version is the one you want. So now this is actually very important. Check this out down here. This ad python 3.82 path is unchecked by default. We absolutely have to make sure that this is check. So go ahead and check that. I don't know why they don't make that standard default. The path means on Windows computers at least that we can run python from anywhere on our computer. If we don't check that box, then we can Onley run python in the Python directory and that's no good. That's not what we want. We want to be able to run python from anywhere in our computer, so make sure that's checked. If you're on mackerel Lennix those computers don't have anything like a path, so you won't see that when you install it. Don't worry about it in a big deal. You don't need it on mackerel Lennox. Just the windows. So once you've checked that box, make sure it's checked right, Come appear and just click this install. Now button, I'm not gonna do that because I've already installed it on my computer. But when you dio another box will pop up with a little task bar thing that shows you the progress of your installation and when it's finished, you can click out of it, and that's all there is to it. So super easy to download and install this for Windows. Like I said, if you're on a Mac or limits computer, you're gonna have to download the latest Python three version and then going forward whenever you run out command and we'll talk about this later. But we always to run a command in the terminal. You type python and then the name of the file Well, for mackerel Lennix, you guys are gonna want to type in Python three the letter three or the number three and then the name of the file. Try and mention that again later on when we come to it. But that's really the only difference for Macro Lennix when you do this. So okay, I'm gonna go ahead and cancel out of this, and that's really all there is to it. In the next video, we'll go ahead and download and install the sublime text editor and to get bashed terminal 3. Install The Sublime Text Editor and Git Bash Terminal: Okay, so we've got Python installed now we just need a couple more things in order to get started . We need something to write our code with a text editor, and we need something to write commands to run commands with a terminal. So if you're on mackerel Lennox, they come with the terminal. You could just use that. Go to the little search function on your computer type in terminal, and you're going to go. But for Windows, we need a couple of tools. So in a struggle with the text editor, just type in sublime text over Google. And the first thing that pops up is gonna be sublime. Tex dot com Go ahead and click that, and this is a sublime text editor. It's super easy to use. It's very popular, is probably the most popular coding text editor, and it's completely free. You condone eight money if you want, but you don't have to in order to use it. So check it out. It's a sublime text. Three. Build 30 to 11. If these numbers change by the time you watch this video, no big deal. Just download whatever the latest version is, and you could see it. It already discovered that I'm on a Windows computer. If you're on macro clinics, there's a version for that as well. We'll just go ahead and download that. So click this button again, save this anywhere. I'm just going to save it to my desktop, and I've already actually got it there because I've installed this before. But once finishes downloading. If you're on Firefox up here on the top, right click. If you're on chrome, it's down here in the bottom left. Go ahead and click it toe to run it, and when you do, this box will pop up with little installation Wizard. Now, this is a super easy installation. We don't have to do anything that you just take the defaults here. You don't have to click this thing if you don't want to click next and then go ahead and click install now I've already installed it on my computer, so I'm not gonna do it again. I'll just cancel out of here, but you go ahead and click the install button and then it will finish installing, and that's all there is to it. So to run sublime text, just go to your Windows Start menu and just type sublime, and it should pop right up. And when you do, this is what you'll see. And it's just a basic text editor. No bells or whistles. It's just exactly what we need. And this is what we're gonna be using throughout the rest of the course to ride our coat. Okay, so one down. Now we need a terminal, something to run commands using Django and Python. You always have to run commands. And so you need a terminal in order to do that. So we're gonna use something called Git Bash. It's just G I t. And then b A, S h and Seau punch that into Google, and it may be the first or 2nd 1 listed, but it's this git dash SCM dot com. So that's the website you want. And here it is, and you can see it's version 2.24 point one. If that changes by the time you watch this video, no big deal. It all just download whatever the latest version is, and you'll notice there's a version for Mac or Lennox. If you really want to just completely follow along with this course and you're on mackerel Lennix. You can download that. Well, Like I said earlier, you can absolutely use the terminal that comes with your macro Lennox. Most of the commands are gonna be identical. There's a couple that are gonna be different, and I'll try and point those out when we come to them. But for the most part, it's all the same. So you could just go ahead and use that. So let's go ahead and download this and save it anywhere. I'm just going to save it again to my desktop, and I've already downloaded this in the past, so it's already sitting there. But go ahead and I load it again anyway. And when it finishes downloading again, just come up here and click it, or down here in the bottom left. If you're on chrome and when you dio this is the box that pops up now. There are a lot of installation screens in this installation wizard, and we just want to take the default for all of them so we could just click next a whole bunch of times here so I'll just do that next next now, on this screen that says what text editor are you using? And by default, it's picks sublime text. Now that happens to be the one we're using. So that's good if you're using a different text editor and he absolutely can. Don't feel like you have to come through here and find it in this list. You don't just ignore this completely. Just click next, next, next, next the bunch of screens. In this, this installation, we just want next for all of them. Next. Next, next. All right, then, finally, you get to this Final one. Worse is installed. Go ahead and click Install. I'm not going to do that cause I've already installed it. But another box will pop up and we'll have a little task bar that shows you the progress. And when it finishes, you can exit out of it. And that's all there is to that now, in order to run the get bashed terminal same thing as with sublime. You just go to your Windows Start menu and type in G. I t get or get bash with a space in between the two, and when you do, it should pop right up and you can click on it and This is what the terminal looks like so we can type all kinds of commands and stuff, and I'll show you all the things we're gonna do with this going forward. We don't really need to know what any of this is now. I just kind of wanted to show it to you and you notice it says up here. This is the command prompt mind, says Kotomi at Kota Me. That's because that's what the user name of my computer, my windows log in. Name is Kotomi. So whatever yours is that will appear, there doesn't matter what it says there. As long as you get this little dollar sign in this blinking cursor, you're good to go. So those are all the tools we need. We'll also need to download and install Django. But we're gonna do that from this terminal. And so there's nothing you don't have to go to a website to download or anything like that . So we'll start to do that in the next couple of videos. So that's all for this video. In the next video, we'll set up a virtual environment, a little sort of place inside of our computer, where we can install Django and all the things that we need to do to start building our website. 4. Set Up A Virtual Environment: okay, this video, we're going to start to build out the virtual environment for our project. So a virtual environment is sort of like a little walled off garden. It's an area inside of our computer that sort of separate from everything else and inside of this virtual environment. That's where we're gonna install Django and installer actual website project and do all of our work. And the reason why we put it inside of a virtual environment. Well, there's a bunch of different reasons, but one of them is. It's really easy to install different versions of Django in a virtual environment. And if you install Django just in your computer, you're stuck with that version of Django. So there's a lot of times when you might be working on an older project that uses an older version of Django, and you want to use that older version well, it's really easy to install that older vote version inside of a virtual environment. That's the main reason also, it keeps all of your python dependencies in one spot and the specific versions of those dependencies in that spot. So if you have multiple projects on your computer, they may have different dependencies for each one, and if they're all in their own virtual environment, it just makes it so much easier. So it's always best practices to use a virtual environment. Python comes with a virtual environment, so there's nothing we have to install. We just need to set it up and turn it on. So that's we're going to do in this video. But first, before we do that, we need to create a directory toe, hold all of our project files. So if I type PWD, I can see that we're in the C drive in the user's directory and the coda me directory. So what we want to do is create a different directory toe, hold our project files. So to do that, we use the command m k D I. R. And that's the same command for Macro Lennox. And then we want to put it in the C drive. And let's call this dental right. Okay, so now it's been created. Now we need to move into that directory, and to do that, we type in the CD command change directory, and then we just type that directory again, probably want to spell it right, And you notice right here, Boom. It shows that were in that directory or weaken type in the PWD command. And it will also show that were in that directory. And we can also take the L s command toe list the stuff in that directory. And you see, there's nothing listed because there's nothing in there yet. We just created it so clear to clear the screen. All right, so we've got our directory now we want to create our virtual environment. So to do that, we have to sort of install the virtual environment. And to do that, we type in Python Dash M V N V stands for virtual environment. And now we want to name it. We can name it anything we want. I'm just gonna call it virtual and you'll see why that's important in just a second. All right, so now if we type in ls to list this stuff in this directory, we see there's this new virtual directory, and inside of there is all of our virtual environments stuff. Now we don't care what any of that stuff is. It's just going to sit there now. We want to turn on our virtual environment, and you'll need to do this every time you wanna work on your project. You want to make sure your virtual environment is turned on. So to do that, we type in source and then the name of that directory and then scripts and then activate. So source virtual scripts activate. And when we dio notice every time I hit enter Now this little virtual and parentheses shows up on the command prompt, and that means that our virtual environment has been turned on. So that's the command to turn on your virtual environment for Windows. If you're on a macro. Lennox, I think the command is source. Been slash? Activate. I think. I think that's the command. If it's not, go ahead and Google how to turn on vague V Envy and Mac. You'll see. But I'm pretty sure that's the command. All right, so now our virtual environment has been turned on to turn it off. We can just type in deactivate the active bait, and when we do, you'll notice that virtual thing is no longer above our command. Prompt. That means our virtual environment has been turned off, so that's kind of cool to turn it back on. I'm just gonna press up on the arrow key on my keyboard, and I can just keep clicking doing that, and it will cycle through the most current commands that we've done and we can see this source. Virtual scripts activate so I can go ahead and turn that back on again and we're going to go. So that's a virtual environment that's really all there is to it. From now on, every time we log in here in this get bashed terminal, we want to make sure we see this virtual. If it's not just issue that same command we just did to turn it back on and you're good to go. So that's all for this video. In the next video, we'll go ahead and install Django and create our Django project. 5. Install Django and Start Our Project: okay, This video, we're gonna install Django and creator Django projects, so make sure you're in your C slash dental directory. Make sure you can see this virtual thing and just type in pit freeze real quick. And pimp is the python installation program Pip right? And it will show you what is currently installed inside your virtual environment. And you can see it didn't do anything because there's nothing installed in our virtual environment. We just created it and turned it on. So we want to install Django now. So to do that's really easy. Just type in Pip install and then Django. Now I mentioned in the last video that it's really easy to install different versions of Django inside your virtual environment. To do that, you just type to equal to signs afterward and then whatever version of Django you want and that will install that version. But we just want the latest version of Django. So I'm gonna go ahead and just enter, and this will download and install Django in a couple other things. This sequel parse this as giraffe thing in this pie. TZ Piketty's easy python time zone file jangle uses it for some stuff and sequel parse Sequels, A database. So that doesn't database stuff. Not really sure what this, as your f thing is, it's pretty new. You see, we're installing jangle version three, which just came out a couple of weeks ago. So I think this is new for Django. Version three. Um, one thing I will mention if this version of Django changes by the time you watch this video , no big deal. Just use whatever version is the most current version. So all right, it looks like it's done. Now we can clear the screen. Now if we type in pit freeze, we can see all of these things have been installed in our virtual environment. And if you were to deactivate your virtual environment and type it freeze again, none of these things would be listed because they're only installed inside your virtual environments. That's really cool. Okay, so we have got Django. We've got all the tools that we need, everything installed that needs to be installed. Now it's time to actually create our Django project, so this is really cool, and it's really easy. We just have been Django dash at men dot pie and then start project and then just name your project. I'm gonna call this dental and call anything we want, but dental seems appropriate. And boom, that's it. Now, if you get an error, type in the same command, but don't put dot pie on here. Just put Django and men start project dental, some computers. I don't know why I get an error when you typed up, I I think it has to do with how you installed python or something. But if you get an error, try that. If you still have problems, send me a message. But you should be okay. So now if we type in ls we could see there's this new dental directory. So we need to move into that directory. So type in CD and then dental. You notice. I just started to type D, and then I hit the tab key on my keyboard and it auto corrected to dental. That's just a little tip. Okay, so now clear the screen again. We can see now we're in the sea. Directory slash dental slash dental again. And now if we type in ls we can see this managed up I file and another dental folder. Now this is important. Our terminal. From now on out, we want to be in the directory that has the managed up high file, and this is important for Django. We use that a lot for running commands as you'll see as we move forward. But it's just also a good way to know that you're in the right spot, right? So when you're on your terminal, any time you're in here, just type in. Ls if you see this manage dot pie, you're in the right spot and everything's good. If you don't, you're in the wrong directory. It could be confusing cause, you know, we call this dental, and we also call this dental. So which one am I supposed to be in? You may forget you always want to be in the one that has the managed up I file, so that's all there is to that. So now we can head over sublime Tex and add our new project to sublime. So head over to the project button click Add folder to project, and when you do this little select folder thing pops up, go to your PC and find your C drive here it is right here and click on it and then just find that directory where we've been in the terminal. I think we called it dental. So there it is, dental and then dental again and just highlighted here and click Select folder. When you do boo all these files problem you see here is there managed up? I file. If we click this one, here's some other files. There's their settings, not pi Phi. And we'll talk about what that is in a bit, or you are l stop. I filed. We'll talk about what that is in a bit and, uh, cool, Good to go. So now we're pretty much ready to start building out our project. And we've got all the basic set up files that we need all the Django Project files and we're ready to go. So in the next video, we'll fire up the Web server and see if we installed this correctly. It looks like we did, but we never really know until we look at the Web browser and see if the you know website itself that we've just created pops up and we'll do that in the next video 6. Run the Django Server: Okay, so we've got our project all set up. We've got the files listed in sublime. We gotta get bashed, Turmoil, Hominy humming along. Now we want to run the Web server that comes with Django and see if this thing was actually installed correctly. So, Like, said, Django comes with a little lightweight Web server, and it allows us to run our project locally on our own computer. And that's great for debugging purposes. Weaken. As we building this thing out, we want to see it in the Web browser to make sure we're doing it correctly and to actually , you know, see it as we build it out. So to do that, we need the Web server. So to run the Web server that comes with Django, we type in python managed up, I run server and you'll notice almost always when we were on a command in the terminal, it starts out with Python managed up. I so python because whenever we run any python programs, that's how we run them. We type python and then the name of the file, and then this is unique to Django. That managed up high file is used to run commands for Django. So the command in Django that we want to run is this run server command. So go ahead and hit. Enter and this is watching for file changes with state re loader with stat freeloader. So now head over to your Web browser and just type in local host Colon 8000. And when you dio, hopefully you'll see this little screen. This is the default screen that comes with Django. When you install it correctly, it's just this little rocket ship shaking around is pretty cool, and local host just means this is just running on your local computer. This is not up on the Internet yet. This is just for development purposes, and the colon 8000 means were running on Port 8000. We don't really care what that means. It's just how you do it. Often times with Web development things. You run them on specific ports. The port for Django is 8000. So if you saw this screen congratulations. You have successfully installed Django and we're ready to go. So head back over to the terminal and check this out. Notice. We don't have a command prompt anymore. It's just blank down here and we've got these things. So every time we reload our website, more stuff like this will appear here. And that's because this Web server is running in this terminal. So if we close this terminal, the website won't work anymore. So this needs to keep running as long as we want our website to appear in the Web browser. So whenever we're working on our project, we're gonna always want the Web server to run. I'm gonna get control and see at the same time. And when we do it looks like we've got a bunch of errors, All right. This is because Django comes with a database thing and with any sort of Web framework, When you're dealing with databases, you always have to migrate your data base, and we haven't migrated it yet. So to do that, we could just type in python managed up. I migrate, and we're not really gonna be doing any database stuff in this course. So we don't really care about this, but this is just always what you want to do. When you first started Django Project. You want toe migrate the database, get it out of the way so you won't see those errors anymore. So now notice it. Did the thing and go and clear this screen. Now, if we go back to the Web browser and hit reload, we're going to get an error. Why is that? Well, because the Web servers not running anymore, right? We turned it off, right? There's nothing running here. We have our command prompt. So if we want to run this thing again, we can run it. Now if we go back and hit reload, boom! That thing appears again. So, like I said, you always want the Web server to be running in the background. And what I usually do is I just keep it like this. And then I'll go to my Windows Start menu and on typing get bash, and I'll just start another Get bashed terminal, right? So the Web's, the Web server itself, will keep running in this Bash terminal. And in this one we'll do our all the other Django commands that we're gonna have to enter going forward. So you notice we're not in that directory anymore, and our virtual environment hasn't been turned turned on. So let's walk through getting back to where we were in the terminal. So I'm gonna happen. EmCare I'm gonna type in CD to change directory and at sea Dental Slash. I will just do that. Now we could type ls And we see there's our virtual environment. So that's where we want to be right now. So we type in source virtual scripts, activate to activate our virtual environment, and we could see Boom. There it is right now. If we typing ls so I don't see my managed up I file. I must not be in the right spot. Course we know this. So we wanted CD into the other dental directory. And when I do that now, if I hit ls I see Okay, there's the managed up high file. I know him in the right spot. My virtual environment has been turned on. I know I'm in the right spot again, and everything is good. So all right, we are done sort of installing everything in the next video. We'll start to build out our project 7. Start a New Django App: Okay, so we've got our project all set up. We've got this little screen that's appeared that shows us that everything was installed correctly and we've got some files and sublime. But if we look, they're here, there's really not a whole lot going on. There's only a few files settings file or you are else file. We'll talk about all these later, but there's nothing really else. And that's because we haven't added an app to our project. And with Django, everything is an app. When you want to add something to a website, you're adding an app right now. We don't even really have a website. We need to build one. So we're gonna build a nap. And that's just sort of the terminology. Django, use this. So in this video, we're gonna create an app, and, uh, I'll show you how to set that up. So it's really easy. And in this particular project that we're building, we're probably only gonna have one app. Right? But if you wanted to add like, um, I don't know, a message board or something, right, you would probably create an app for that. If you want to add ah sub domain to your website. You would probably create a different app for that. But those air sort of beyond the scope of this course for this course, we're just creating one website. It's a basic website. We just need one app for it. So to do that, head over to our terminal, make sure your virtual environment has been turned on. Make sure you're in this directory. Make sure you can see your managed up. I file if you type in ls right. And so let's run this command python manage dot Pie. It's always python managed up I and what we want to do is start app Now we need to Neymar app. And what is this gonna be? Well, it's gonna be a website, so I'm just gonna call the app website very original and that's it. So now if we head back over to sublime, we could see Oh, this new Web site directory has just appeared as if by magic and inside of it, there's all kinds of other files and now, from pretty much from here on out, we need to make a couple of tweaks in this dental directory. But for the most part, we're gonna be working in this Web site directory from here on out. So before we do that, though, like I say, we do need to make a couple of little quick changes. And the first main change is we need to go to our settings, not pie file inside this dental directory. And I want to get rid of all of these comments. We don't need that and just scroll down here to install APS. And these are all the APS that are currently installed in our project. And remember it to be beginning of this video. We created a new app, so we need to list it there. So we just called it website, so just type in Web site and put a comma afterwards because this is a python list and list items in python or separated by commas. So we need to put a comma there, and that's all there is to it. Now, hit control s on your keyboard, the control button and the S button at the same time. If you're on a Mac, I think it's command s or come up here to file and save in order to save it. And when you do you see right there? It says control s if you forget. Um, that's just a short cut. So that's been saved, and that's all there is to it. So now we've got our new app, this website app, and we're gonna be like I said, doing most of our work from here on out inside this app. And, uh, yeah, that's really cool. So I think that's all for this video of just a short one in the next one will dive in and start actually building out our website, building the infrastructure, and that'll be in the next video. 8. Okay. In the last video we started a new app in our project, this website app and we made a quick tweak to our settings dot pie file to add that app. There's one more thing we need to do in order to sort of set this thing up. And that's deal with this euros dot pie file right here. I'm just gonna get rid of these comments. You don't really need those now. Notice if you're not familiar. Euros. That pie file is the file that handles the different your l's of your project of your website and what's a euro? You head back over to our web site. This is the URL, but like specifically, if we created ah home page and we call it home dot html, this is a your URL uniform resource locator, right? It tells the AP where you want to go. We want to go to the home dot html page, right? Well, this year olds up high file is the file in Django that takes care all those things. It keeps track of all those you are else. Well, we've got one this year, olds, not pie file in our main dental project folder. But if you'll notice in here, there isn't one, and we really need one. So in this video, we're gonna fix that. We're gonna create it right now. So head over to your Web site directory, right click on it and create new file and could see it pops right up here and just go to file save, as in just type in your l's dot pie. And when you do, you could see the name changes there, and you can also see it pops up right there. So this is blank. Right? So we need to put stuff in it. So head over to this urals dot pie file, and that's just copy all of this. I'm gonna highlight this. Right click and copy. Come down here, open this file, right, click and paste. And we can get rid of this and we can get rid of that. We're gonna add our own, your all patterns going forward. But this will do for now. You just go ahead and save this. So control s save it or come up here and click file. Save. Now we need to make a quick change to our old Urals. Dupuy file. We need to tell this old file to reference the new one we just created. So from now on, we're not going to deal with anything in this file. We're just gonna deal with stuff in this file because this is our website app. This is where our website's gonna be. All the girls for that website will be in this file, but this main one still needs to reference it. So we need to include the new one in the old one. So to do that, we come up here to this second line right next to path type in a comma. And the word include now include is a module that we can add just by referencing it right there you go and save that. Now there's one more little tweak we need to make. We need to add a path that points to that new file. So it's type in path and then nothing. We want this to be the root path. So there's nothing in the quotation marks and these air single quotation marks and then a comma. And what we want to do is include and then single quotation marks in here website dot you RL's. And afterwards put a, uh, Akama because this is a python list. Python list the items, and they're always separated by commas. So we do that. Say this now. Why website your else? Well, we want to include that new Urals stop I file we used. And where is it? It's in our web site directory right here, so website dot You are else. So we just put it like that and we're going to go. So if we save this, that's all there is to it. Now we're all set up and ready to go so we can get rid of or we can close out this file and we can kind of click this little carrot to sort of hide all these things. Because, like I said, from now on, we're gonna be working almost exclusively in this directory, and everything is set up and ready to go. So that's all for this video. In the next video, we'll start to build out our new home page right now, we just have this default page and we don't want that one to be, You know, our web are our home page. For now on, I'm gonna actually create our own home page will start to do that in the next video 9. Build our First Webpage: Okay, so we've got the basic structure of our app sort of built out, but we still got this default Django page going on here. So in this video, we're going to start to change that to an actual home page that we create and that we have some control over. So that's what we're gonna look at in this video. So let's head back over to our sublime text Now, with Django, whenever you're creating your own Web pages, it's always a three step process. You need a template file actual html page of the website. You need a view and you need a you, Earl. So what say you, Earl? Well, if we head back over to the Web browser real quick, this is the URL, right? But for specific pages, we need specific. You are else. So if we had an about page, it would be like about died HTML or something like that. This about debt. Html. That's the euro. We need to create that and that we need to do that for every Web page. And that goes in our euro. Stop. I foul right here. So we'll look a doing that in just a second. We also need an actual template. File something toe hold. For instance, if we created an about page we we need in about dot html file. So we need to create that. And finally, we need a view, and that's in views. DuPuy. There's nothing there right now, but we can get rid of this thing right there. That comment and the views air sort of like the brains behind the scenes. And they allow you to do all kinds of cool programming things if you want. And we're not gonna get into great detail about views in this course because our website that we're gonna create isn't that complicated. So it's not gonna need a whole lot of complicated view stuff. So we'll just do the basics in this course and I'll show you how to use it and that it should be cool. So three steps of you, a URL and the template file itself. So let's start off by creating a template directory, a place to hold our template file. So you want to put that inside the directory where your website is. In our case, that directory is called Website, so inside of that directory we need to create a new folder just right click and click new folder than down here. You can just type in templates. That's the default. What? We always name these things. And then inside a here, we can right click and create a new file and you see new file pops up, and I'm just gonna create a little bit of, uh, html here that says, Hello. World opening, closing H one tag. Now we can come up here to file and save as, and we can name this. We could save this as anything we want. This is our home page, so I'm gonna call it home dot html and we're going to go and you notice the colors change in sublime because now that we saved it as a dot html file sublime realizes that it's an HTML file and it applies html styling to it. So that's cool. All right, so that's step one. We have our template file. Next, we need a view so we can come over here and just go define and then name it. And since this is a home page, we're gonna call it a home view, and we want to pass in a request. Any time somebody goes to the Web browser and tries to view a Web page, they're making a request to our back ends. We want to pass that regal request from the Web browser into our app, and we just do it just like that, Really simple. And now what we want to do here is return and we want to render a web page. So we type in render and this render you notice comes from up here. We're importing the render module or the ability to render. So what do we want to render? We want to render that request, and then we want it to be We wanted to point to home dot html and then we want to pass in a context variable, and we're not really gonna talk about that right now, but that's just standard what you do. The context very well allows you to pass python things into your Web page. We're not going to do that right now, so but we still need to just put an empty context variable there, just in case we do want to use it in the future. So go ahead, save this file Control Asir compared to file save now, The last thing, the third thing we need is a your also inside of our website directory opened the euro Stop I file. And inside this pattern you're a pattern section tab over now Don't space over using the space keys. The tab key on your keyboard is very important. Tap python is tab sensitive. It requires tabs. So what we want to do is create a path and we want that path to be the root path. So we'll put single quotation marks Empty pass. If we wanted this to point to about that HTML, we would type about that HTML. But we don't want that. We just want the route path the route You are l'Homme our local host. Basically right. So then we want to point this to our view, so its views dot home and then we want to name this. Let's name this home. I'll show you what the name is for a little bit later. So this views dot home we want to access this view that we created earlier. So views references. ARV used up high file and home references. This home function that we just created. But in order to do that, we need to import our views into this page. So to do that, we just come up here and go from period import views. Go ahead and save this file and the period means from inside this directory. So from inside this website directory, we want to import our views file. So that's just how we do that. Okay, So go ahead and say this. Now let's head back over to our get bashed terminal and we want to make sure that the servers still running. So this python managed opined, It looks like it's still running, so that's fine. Now, if we come back over here to our home page, our route, your l and reload boom, it says, Hello world. And that means the whole thing we just did was successful Notice. It's rendering up this whole this home dot html file, which is just this guy right here that we just created. And if we make any sort of changes to this at a bunch more exclamation points and save this file, come back over here and hit, reload, boom and appears right away. So that's very cool. So we pretty much have now everything, almost everything in our app built out and ready to go to start building out our dental website. Now all we have to do is sort of upload and tweak our template files for the actual dental website itself, and we're pretty much done. So that was really quick to set this whole thing up. And that's one of the great things about Django allows you to create websites very, very quickly. So that's all for this video. In the next video, we'll start to look at the template files. I'll show you where to get them, and I'll talk a little bit about how to find template files in the future if you want to build something besides the dental website and that will be in the next video. 10. Download the Dental Template: Okay, so we've got our app pretty much built out. There's a couple of longer little tweaks will have to do when we install our template file . But for the most part, we're ready to go. So now we just need our template. Right? So the template I'm going to use is the one I showed you the beginning of this course. So where do we go Find that? Well, I've got it actually on my website that you can download and I'll show you that in just a second. But for now, let's just go to Google and type in free dental website templates don't like that and just sort of look through here, right? So if we come down here, here's a link right here. This is the very 1st 1 below all the ads, right? And it's 30 best free dentist website templates in 2020 looks promising. So go ahead and click that and this is the website. It's color lib dot com for slash WP for slash cat ford slash dentist and you can come to this website if you want or just go to my website. I'll give you the URL for that and a little bit, but because this could change in the future and just come through here And here's the one we want. This is one I kind of like it's called den toe. So we'll go ahead and click on that and we come to this page and here's a preview so we can click on that and look at it. I'm gonna get rid of this frame here, and yeah, this is the website that we want. Okay, so we can close that out and then just come down here to download. And when you do, this thing pops up and in a few seconds, this save file thing pops up, so go ahead and click, save as and then click OK, and save this anywhere. I'm just gonna save it to my desktop. Actually, I've already saved it there, but I'll download it again. And up here. I'm on Firefox Web browser and my downloads appear in this little blue arrow. If you're on the chrome Web browser, they appear down here in the lower left hand corner. If you're on some other browser, just go to wherever your downloads are saved. And if we click this little thing we see here is the dent. Oh, dot zip file. Now a zip file is it's a bunch of files crammed together into one file, and they're all zipped together. Right? So we need to unzip this file. We need to extract all the files out of here before we can use them. So I come over here and I'm gonna click the thing to open it. And then on windows, you're just gonna come here and look for this extract all button so we'll go ahead and click that. And when we do, this little box pops up and it says, Where do you want to save these files? Well, we could save him anywhere. I'm gonna save him right here. I'm gonna put a dent 02 because I've already extracted this earlier. But you could just leave it as it is, Danto. And if you want to say that somewhere else, you can click here to do that and make sure this little boxes check show extracted files when complete. So we want to be able to see these files after we unzipped them, also going click extract. And it's doing its thing. And boom here it pops up. So here's the Here's our files and I'm just gonna go ahead and close this other one. And I'm also gonna close this. Now we have the files. We've unzipped them before we move forward, though I want to show you where you can find these files. If this website ever disappears right, you can always come back here to download these files. But these these sort of free template websites come and go all the time. But if you head over to see kota me dot com, that's my website and then templates and then dent oh dot zip. It's the same exact file. You can download it straight from my website if you come to economy dot com slash templates . It just says nothing to see here, folks. So you have to be sure to also type in den toe dot zip. If you wanna download it straight from me, it doesn't matter where you download it from it all. Just make sure you have those files. Now we can pull this up and look at this. Here's ah, new directory and you'll notice it's on our desktop. So we ever close this thing. If we want to find it again. We could just navigate to our computers desktop and find this dent. Oh, directory and click it our dental to I guess I saved it as you'll save it as Danto. And then in here we can double click here, and we can just look through here. And these are all the files that come with the template. And you can see there's a lot of files here. Right? So, uh, in the next video, all street, how to start to install these into our Django project. But for now, I want to talk just for a minute about how to find other templates, and I think you've probably already figured it out. We found that one pretty simply just by going to Google and typing in free dental website templates. If you want a plumbing website, just type in free plumbing website templates, right? Or things like that. Another good resource is I think, on a clock I won't say theme forest. Yeah, theme forest dot net. And you can come over here and click on HTML cause these air html templates and then just search, um, for you know, whatever you want technology wedding, personal entertainment, creative. You want popular items? You could see these air all paid templates, but check it out. $16.18 dollars $28.17 dollars. Html Templates are usually very cheap. So if you need a specific kind of template, you can search here for plumbing templates or whatever, or search for business templates, and then you could modify it to any business. Right? Make it into a plumbing template just by putting plumbing in, you know, in the title or something. Eso A lot of times I'll come here if I need a specific template. If $14 I come on, he's a ridiculous. If you can turn around and sell this to some plumber for $2000 I mean, why not spend $16 to get a really professional nice template? So I'll use this website a lot. Sometimes you can search and find free ones. Sometimes you get frustrated because it takes a long time to find a good free one. So those are a couple of different options you can dio when you're looking for templates. So that's all for this video. In the next video, we'll start to actually install our new ah template that we just downloaded. We need to make a quick tweak to our Django project before we do that, and we'll look at that in the next video. 11. Create The Static Directory: Okay, so we've got our template files and we're ready to install them into our Django project and start building our really cool dental website. But before we do that, we need to make a quick little tweak and a quick change to our Django app. So head back over to sublime text and actually, let's pull apart templates here, you notice inside here they come with some HTML files, but they also come with a bunch of other things. For instance, CSS, which stands for cascading style sheets of fonts, images, Java script s CSS and SRC. We don't really care. And the SAS cash really care what those are but specifically thes things CSS, javascript and images. We need to handle those types of files a little bit differently in Django. So for one thing, we need a directory in order to hold all these things. And Django calls these types of files CSS javascript images. They calls them static files. So we need a static directory and we need to make a quick tweet to are setting stop high file to tell it where are static directory is before we can start using these things. So that's what we're gonna do really quickly in this video. So head back over to sublime. And up until now we've been putting new things in this website directory. This is one of the things where we won't be putting it in. The Web site directory will actually be putting it in our main app directory, this very top dental. So come up here and click new folder and we want to call this static and you could see it bops it up right up here with the rest of our sort of Maine directories here. All right, so there's nothing in there right now, but we need to put another directory inside of it. So right, click here and click new folder and we want to call this website eso Now in our static directory, we have another directory called website. Why? Because we might have a lot of different APS in our Django project. We don't we only have one called website, but we might have a bunch of things. We might have several different Web APS. We might have a message board. We might have a tech center text support center. We may have a messaging app. We have all kinds of stuff in our thing, and each of those APS may need to use static files. So if we had another app called a messaging app, we would add another directory it to our static directory called Messaging App or whatever eso we want to designate which static files go with which app. Now we only have one app, so we don't really need to do this, but it's still sort of best practices, so I just put it in there. So now we've got our static directory, but we need to tell Django where that IHS It seems like it should be a default thing, but ah, but it's not. So let's head over to the dental directory here and open up our settings, not pie file, and just scroll all the way down to the bottom and you'll see it already sort of references this static earl. But we need to go one step further and we need to go static files underscored jurors. Duras stands for directories, and we want to create a python list and tab over and inside of here. We want to tell it where to go by typing in OS dot path dot join and then parentheses, and then base underscore d i r. And then a comma and then single quotes inside of here static and always want to put a comma after that. So go ahead and save this file. So what is this? This is saying it doesn't depend on your operating system. So I'm on windows, You may be on mackerel Lennox and those computer operating systems handle path directories differently. So this allows us to use generic past no matter what operating system are on, and use the base directory as the base part of that. And what is this base directory? If you really care, we can scroll, appear to the top here and by default. This base directory has already been defined for us. When we installed Django so and you could see also, we've imported OS stands for operating system, which were also referencing here to use our OS are operating systems path to add it to the base directory to tell it where are static file are static Directory is, though you probably don't care about any of that. Just copy and paste those three lines of code right here that we just did. And that's all we have to dio. So make sure you save this file control s or just come up here and click Save Command s if you're on a Mac and we can close this and corn sort of clothes that as well and now we're done. So now all there is that's left to do is to actually add those new template files to our static directory, and we'll start to look at that in the next video. 12. Install the Dental Template: Okay, so we've got our static directory all ready to go. Now we just need to import all of the files from our templates into this directory. So first, we need to open up a file Explorer so that we can drag and drop all the fire up files from our template file into this Web site directory. So there's lots of different ways you can do that. You go to your Windows Start menu and just start typing File Explorer and on Windows, that's what is called a file Explorer. I'm gonna do that. And a little icon will pop up of a little folder that says File Explorers, Go ahead and click that. And when you dio, this will pop up and what you want to do is navigate to this folder, this website folder. So go to your C drive. And then we called this dental. So just look for that dental directory. There it is, an inside of this dental directory. There's another dental directory, so we click on that. And then here's our static folder right there. And then here's that website folder inside of there. So double click that. So this is where we want to drag and drop all of our template files. So let's pull up the template files. Remember, this is just from the last video, and we unzipped all those files, right? So what we want to dio is kind of look through here. What we need are all of these directories. So I'm just going to click on one, hold down the shift key on my keyboard and just pushed Press the up arrow key to highlight all of them. Or you can just sort of hold down the button on your mouse button and just sort of drag at all like that just to make sure they're all highlighted, right? And then we just want to grab any of these and pull them on over just like that and then drop them in there and you could see boom, they get, they get copied right on over. And when we dio, we can see now in our static directory in our website folder. All of those other files are now or all those other directories have been copied over. So for instance, this I am g those sense for images or some background images, we click on one boom. There's some toothpaste and toothbrush, right? Very cool. Now we've got all of our template files, but we're not quite done yet. Let's come back over to our, um, templates folder and look through here. These are all HTML files. We're gonna treat these a little bit differently, but look at here. There's this extra style, not CSS file. And so we need to put that in the CSS folder. But we click on here and look, there's are ready a style that CSS So I'm just going to click on this and click rename, and I'm gonna call this style to for now. And you can see it's been renamed, and I'm gonna pull back up are two folders here, and I'm gonna navigate to that CSS directory again. There's our style to that. We just renamed right. I'm gonna grab this guy right here, and I'm gonna pull it on over and add it, and we're probably gonna have to tweet this and mess with it a little bit later. But we'll talk about that a little bit later when we need to do that. Andi OK, so we're going to go. So looking through here, rest of these things. We may have to change this gulped file thing. We'll look at that in a bit, but probably not. Um, So what are the rest of these files? Well, here's a read me file. We want Want to read that? Here's a license file. We might want to read that. How would we want open with us? Open it with no pad. Here's a little license. It's licensed by the Sisi E Y three point. Oh, I don't know what that licenses, but you could google it if you wanted. Basically, I think it means you have to leave the foot or credit in place. Otherwise you have to pay them. So we'll look at that in a minute when we look at the foot or file. But okay, whatever. We're gonna look at that. Now, the rest of these files, these are the different pages of the website. So we're going to start out with this index dot html file. So I'm going to navigate to our template directory. So it's we don't want to be in website. We want to be in static. We do want to be in probably dental and then our website directory. And then this is our templates directory. Remember a couple of video for the last video? A couple videos ago. We, uh, created this home that html file. Well, now we want to put this index that each team I'll file there as well, so I'm just gonna drag and drop it. And if we minimize these things and check it out right here in supply and we could see website templates and here's that index dot html file and this is the file we're gonna be dealing with going forward. This is our actual dentist website web page. Right. So from now on, we're going to be dealing with this and, uh, yeah, I think we're going to go. So I think that's all for this video. We've got all over template files, sort of installed into our Django project. Now we need to tweak them in order to get this to actually work correctly. And we'll look at that in the next video 13. Add Static Tags to The Template: Okay, so we've got over template files installed. We've got her index dot html page, but none of it really works yet. So in this video, we're going to start to tweet things in order to make all these things work. So first things first, come back. And remember this hello world original page we created. If we come back here, just this hello world, right? I created that web page just to show you how to set up any web page with the three things right? The template, the URL and the view. Right. But we don't actually need this hello world page anymore. We want to use that index dot html file we just installed in the last video. So what we can do is just get rid of this guy for now, Someone right? Click on this and delete. And then I'm gonna come to this index that each emo file I'm gonna rename it home dot HTM. Oh, why am I doing that? Well, because we've already set it up as home. We've already got the view set up for the home. We've already got the u r l set up as home, so I'm just gonna rename that file to home. We could have kept it as index dot html, but then we would have had to come through here and change this to index this index and this to index and this to index. And why do that when we could just rename this file home that HTML So now you may think we're ready to go. But if we actually run this in the Web server or in the Web browser, you see ah, what's going on here? Nothing looks the way it's supposed to look right. This image isn't working. The CSS isn't working. CSS stands for cascading style sheets, and it's what makes HTML look good, right? All we're seeing here is just the html of this this file and that's no good. So why is this happening? Well, we uploaded all of these CSS files all the image files, all the JavaScript files in the last video. But we haven't kind of connected them to our our Web page. And Django has a very specific way that you connect things like that. It's just called a static tag. So we need to come through here and sort of create static tags for all of those things that are being referenced here. So for every image on this page, we need to create a static tag for that image. For every CSS file on this page, we need to create a static tag for that CSS file reference. For every JavaScript file referenced on this page, we need to create a static tag for that. JavaScript and the static tag just points towards that damage or JavaScript file or CSS file on our back end. So the first thing we need to dio is at the very top of the file, and you'll need to do this for every HTML file that uses a static file on your app. We need to create a little tag, and this is just a Django tag, and it has an opening tag and a closing tag. That's just how you do that. And inside of here, we need to go load static, and that does just what it says. It loads all of our static files from our static directory. Right? So remember, very important, you need to put this little tag at the top of every home pay or every HTML page that you build from now on. Now, we've only got one HTML page at the moment, but we're gonna have more than one going forward. So we're gonna have to remember to put that tag at the top of every Web page. So that's part one. Part two is like I said, we got to create ah, static tags for every single thing on this page, every sort of static thing. So here is an image. Here is a CSS file. If we look through here, there's just a ton of images like Here's one background image We need to create tag for this. All right, there's another one. There's just a whole bunch. And this is the tedious part of this because you just have to read through all of this html and look for images, CSS files and JavaScript. So Java scripts air usually down at the bottom so we can come all the way down here and we could see here they are is a bunch of Java script references, so we need to create tags for those well, so come back to the top. A static tag is pretty simple. It's the same sort of format we've with ease Opening closing tags Anti Is this We just types static, right? And then single quotation marks. And inside of here we just reference the static directory. So ours is in static slash website, so we type website slash and then whatever the actual file is. So if we have ah, logo dot PNG would just do that. So the trick here now is to go through and find all of these things and replace them with this and I'm gonna copy this and to do that, let's just take this one for instance. I'm gonna paste this in here just as a reference you come in here and you find it. Here's the rink link relative. This is an icon. The A giraffe is the URL. Where it's sitting is in image core image fabric on what is this? Well, here's this image directory. So we look up here, here's our website directory in our static directory and it has a bunch of other directories in one of them is I m g. That's this thing right here. I am g and then core. I am g inside of that. Well, there it is right there. Core I m g and then fabrikant dot i c e o. Well, here it is. Fabrikant, out I CEO Is this this little two thing here? Right? That's kind of fun. So what we need to do is right here where this period is inside of this quotation Mark, we just wanna print this whole static tag, but we want to change this year l to this. So I'm just gonna copy all of this control. See that? Same time to copy, or you can right click and click copy and delete it. And then just put it right here. And I'm gonna hit control V at the same time. Or you can right click and click paste and get rid of that. All right, so we've essentially now change this to this static tag. So it's pointing now at website in static Just right here. Static website. I am G core. I am G fabric on I m g core. I m g fabric on sovecon. Right? So all right. I'm like, copy this and delete it. Let's save this file. And now let's come back and the Fabrikant goes up here in the web browser. So now if we hit Reload. We see Boom. That little dental thing appears right up here in the tab of the Web browser. That's the fabric on. So it worked. So now we have one image, so that's one of, like, 50 to go. So that's all for this video. In the next video, we'll start to walk you through, making the changes to the rest of things on that home page for the static tags. It's gonna be a long and tedious thing, but we'll look at that in the next video. 14. Tweak Our Static Tags (part 2): in the last video, we looked at static tags, and we created one static tag for this little dental tooth icon right here, which is our fabric con. I don't know why it's called Fab com, but it always has been. And now we need to come through here to the rest of her home, that HMO file and just kind of read through all of this and just slogs through it all and replace every image, every CSS file and every Java script reference with a static tag like we did in the last video for that one thing. So here's the 1st 1 Here's the next one. It's a CSS file. Now images usually end in dot PNG or dot J. Peg or something like that. JavaScript files usually end in dot Js and CSS files and in dot CSS. So you need to be on the lookout for references to those things. And here's the 1st 1 style dot CSS. So we need Teoh change this so I always paste it right above because we're gonna want to copy this again later on as we move down. So I paste it once and then I come in here find the H R F reference and inside the quotation marks, paste it again and then we just grab whatever the thing is style dot CSS and we paste it right there. And now that's that's good to go. So then I copy this again deleted, and we move on down the page and looking for the next one. And, you know, the nice thing about sublime is it changes colors for different things. So you can sort of at a glance, You know, I'm not really reading all this. I'm just kind of scanning it with my eyeball, looking for changes in colors. Right? And I don't see any I don't see any. I don't see hope there's a changing color background image. Here's a dot jpeg file. So again, I'm gonna It's kind of come up here and paste that in and then inside of here notice there's no quotation marks this time, But just come to the beginning of the reference of the thing in this case one dot j peg and haste in our static tag. And then again, I'm just gonna highlight all of this stuff and control, See, to copy it and control V to paste it. And okay, that one's done. And I just come up here again and control C and copy that guy, and then I just move on down to the next one. Now, I'm not gonna make you watch me do all of these, right? Because this is a gigantic file, right? There's a lot of these changes we need to make, so you'll just have to go through here and do that yourself. But I will show you down here at the bottom. This is the javascript references. We've done a CSS one. We've done a couple of images. Now, this is a Java script. One so same exact process. I'm just gonna paste in my tag here and then come to the SRC whether the quotation mark isn't pasted and again. And then I'm just gonna highlight the thing. Control seed. A copy back over here. Control vida paste. And that's it. So you're gonna want to come down here and do all each of these JavaScript references in the same way. So I'll look through here one more time and I'll show you a little trick. You come up to the top here and hit the control and F button at the same time, this puts up a find window. So we can specifically I mean, we're gonna look through here and eyeball it right, But we're gonna miss things we always dio I always dio So what I want to do here is I'm just going to search for anything. An image is usually end in dot PNG. Oh, here's one right there. Right. This one looks different than the other ones. Remember the other images we just did. They were blue. This one looks a little different, so I might have missed it. Right? Um but I can paste it in. He's that guy. Uh, get rid of that and just copy all of this, paste it right in, and we're good to go. So that's what I'll do all I Bali. I have all the entire file going through making changes. And then when I'm done, I'll come back here and I'll do a fine for anything ending in PNG. Then for anything ending in J Peg because that's another popular image file format. Right? Then I'll also do ah dot Js to make sure I got all of those and then also dot CSS To make sure I got all of those And you could just clean keep clicking the find. For instance, if we do dot p and g see this this when we already did pops up, you click the button again down here it will keep going and find all of them, right? So super important to kind of do that just to make sure you have everything. So that's all for this video. I'm gonna go off camera and come through here and make all of these changes because it's tedious going Take me, like, 10 or 15 minutes to find all these and change them. But it's the exact same process I just showed you. You know, just go through here and maybe eyeball it, or, if you don't want to eyeball it all, you want to be sure just from beginning, start by control f finding each of these things, and just every time one pops up, make your change. Add your static tag, tweak it a little bit as we've been doing, and you should be good to go. So in the next video, we'll take a look at this again after I've made all these changes and hopefully, uh, the website works. It won't. And I'll tell you why then But that will be in the next video. 15. Tweak Our Static Tags (part 3): Okay, so it only took me about 15 minutes, but I went through here and I made all of these changes with, uh, adding the static tag to every reference of JavaScript images or CSS that I could find. You know, it really just depends on the template. Sometimes there's five you have to change. Sometimes there's too. Sometimes there's, like 50 in this particular one. There was, like, 50 so it took a little while, but I got him all I think, and, uh, we should be good to go. So I save this file. Now let's head over to our Web browser and click, Reload and see if this worked and it's not gonna but way we have at least something that looks a little different. The images air showing up all right. But it's still obviously just not quite right. So what is going on? Well, this is interesting for this template, and this happens a lot of the time, but sometimes it doesn't. Sometimes you just get lucky and it will work right away after you've made those changes that we just made. But in this particular case, we need to make one more change and The reason that is is because remember when we brought all of our template files over there was this extra style dot CSS sheet style that CSS file . And because there was an extra one, it needs to be sort of tweaked a little bit in order for it to work. Right. And this just happens to be this particular template is the way that says And if you get a template and doesn't quite work, chances are this is what you'll need to do to fix it. So what we could do is just head over to sublime, And, uh, the reason why I know that that's the problem is because we can see these things aren't doing what they're supposed to do. And this is just quite obviously a CSS problem, right? Something in our CSS file is off, which is causing the styling of all of these things to be wonky, Right? So that's what tells me I should look at the CSS file. So what I'm gonna do is come over here to our static directory and our website directory inside of it, and then I'm going to click on this CSS, and I'm just gonna come down here to the style sheet that we did. And here's the style sheet. If you're familiar with CSS, that's what you're going to see here. And I see right away Oh, all of these things right here are referencing different things. But look there pointing at CSS slash style CSS slash font awesome CSS slash magnificent pop up and we can see there is no other CSS folder. This is our CSS hold right here. So since we copy this style sheet into this directory, we're getting some some routing errors here. So we can change this just by getting rid of this reference. And I'll show you why this fixes it after I do this right. This actually should now be style to cause because remember, we renamed that style to when we imported this style couple videos ago. So why does this now work? Well because it's referencing to fall asset in this directory and default assets. Where is it? There does full assets slash Classy knaves is in this directory, right? That was probably a bad example. Let's go back and look again this hour carousel. That's right here inside this directory. So we just need to change the paths. And now that now our program should be able to find all these files. So it's going to save this and head back to our website and give this a quick reload still does not work. If we head back over here and look at this style that CSS reference, we notice it's just pointing to website slash style that CSS And if we come up here and look at our static website directory, we see there is no style that CSS file. It's actually in the CSS folder. So, like we just remove the CSS from the style sheet a minute ago, we need to add it right here. So when we do that boom, boom and save this now, that should take care of it. You come back here and hit Reload and Wahaha are awesome. Until website is working, we could scroll down here and everything seems to be looking good and this is fantastic, right? And I was down here. I mentioned this earlier. This template is made with heart by color lib. Their licence says you have to keep that on there or else you have to pay them. You can go to their website and find out how much you have to pay them to remove that. Or if you're a nefarious, you can just remove that yourself by coming back here to your home page, going down to the bottom, finding that little snippet right here. Right. This template is made with hearts from color lib, and you could just, you know, delete that, um, you might also want to get rid of this, too. I don't recommend you do this cause that's the license doesn't allow you to do that. But if you wanted to do that, you could. Or you could just contact them and pay a little money to buy the template yourself. Or you could find some other template that you paid for that doesn't have a little tag A to bottom of like this. A lot of free templates have those little things. That's why they're free. So I'll leave that to you and your integrity and whatever. I don't know that anybody is going to come after you removing that. But you never know. We live in a litigious society. So anyway, oh, you might also want to get rid of that too, if you're going to get rid of it. So anyway, back to the website, everything seems to be looking good now. None of these links work right because we haven't built out these Web pages, so we'll start to look at that and doing all those things in the next video. There's some more tweaking we need to do. Obviously, this home page should go back to our home page. The link. Ah, and it doesn't so there's lots of tweaks yet we still have to do to this template to make it, you know, sellable to a dentist or whatever, and we'll start to look at those in the next video. 16. Building Django Links: okay, This video, I want to talk about Django links very quickly. So a link is what these things are here, right there. Links to other pages. And right now these pages don't exist. So we're getting an error. But more specifically, I want to talk about the actual link itself. So let's look at this specific one, this home link. So let's head back over here and just come back to the top of our home, that age demo file and scroll down here. And until we find the knave barcode and he received a logo, it points to index dot html. And here's this home link. This is what an HTML link looks like now. We could just change this to the root u R L, which is a Ford Slash. Right? So we save this. This should work. Let's head back over to our Web site, hit, reload, and give this to try. Now if we click on here, Boom, it does go back to our home page. Well, that, like I said, is an html link right? And they worked just fine. But it's best practices with Django to not use regular HTML links, but instead use Jenga links and Jenga links are very similar to this load. Static tag that we did earlier. Anytime we're doing Django sort of tags, they always look the same. They start with this open and they end with this closing tag in the inside of here. We do something. Well, what do we want to do? We want to create a jingle link. So to do that instead of a slash there, let's create our Django tag and to create a Jingo link, you just type in u R l That's what we want. You remember paths to our Urals or dealt with in the Urals, not pie file. So we create a euro, and then name it. So we want this to point to home. All right, so we save this now. Why home? Well, remember, back to our Euros. That pie file. So is head over to our Web site directory. Let's close this cause this is looking confusing and come down to our your el stop I file. Remember when we created our our you are l for our home page. We gave it a name and we called it home. That's the name right there. that were referencing right here. So if we called this, um, home page, for instance well, then here we would just reference home page, right? But we didn't. We called it home, so let's change that back. And now if we come back to the website and hit, reload and then click this guy, nothing has changed. It's still a link. It still works. So it kind of begs the question. Why do we want to create Django links instead of regular HTML links? It just seems like more work for not a big benefit. Well, the reason why we want to do that is because in the future we may want to change our you are l structure, right? We want me may want to change the names of pages if we dio. It's really, really easy to make a change right here and call this, you know, and point this instead of two views dot home, we might want a point interviews dot index. Well, if we do that, it'll still work because changes back because Django with this Django link will update automatically. So that's why you want to use these because we might have a website with thousands of Web pages, and we don't want to edit all the thousands of Web pages that have standard HTML links. If we make a change when we use jangle links, we don't have to. They'll update automatically if we make a change on the back end. So that's why we want to use jingling so super important. And you could come down here and let's just I'm gonna have all a couple of these and copy this. Here's another reference to the index page so I could just change that. And up here, the top where the logo was, Remember we saw that. Let's see, where was that at Logo? It was another reference to index dot html. So just paste that and I'll say this and let's just come back over here and look at this real quick. You could see up that works. There's a home that works. Okay, so things are starting to change with our Django links, and that's pretty cool. So that's all for this video In the next video, we're gonna come through here and start talking about other things, just sort of generic things that we can change the way we might want to change before we start building out the other pages of this website, and we'll look at that in the next video. 17. Tweak The HTML Template: OK, moving right along. There are a lot of little things that we're gonna want to tweak. They don't really have anything to do with Django. There more to do with just customizing this to fit your specific dentist. Right? So let's look at some of these right now, like right Appear the top. I'm seeing this address. Obviously, if we're selling this to an ad to a dentist down the street, this is not gonna be her address. It's not gonna be her email address. These social media links are gonna point to whatever her social media links are. So it's kind of just spend a couple of minutes in this video addressing some of those things. So, like I said, this is not really Django. This is more just tweaking the HTML. And if you don't know HTML, that's fine. You know, up until now, we've been making lots of HTML changes. We haven't really needed to know HTML in order to do it. We're not writing HTML code here. We're just tweaking the codes that somebody else somebody else did. So right off the bat, I see this title. So I'm gonna change this Teoh Doctor John Smith, D M. D. Let's go ahead and save this and let's come back here and hit. Reload and you could see up here in the tab. The browser tab. Now it says Dr John Smith, D M D. It's got that little Fabrikant icon remember from earlier. Okay, so that's cool. And this is what you want to do. You just want to kind of read down this file and just kind of eyeball things, and you don't need to know what any of these HTML tags are in order to see. Oh, well, here's that address that we want to change, right? So let's go. Ah, twenties Herbert Street. Um, New York, New York 12345 I don't know what the ZIP code is here, and we can copy this. And then here again. Also, there's another. Another reference will pace that in there as well. And right here is Ah, Gmail address. Let's call it Ah, Dr or what we call herself Dr John Smith. Okay, the doctor john at gmail dot com. And right here we want to change it again. Doctor john at gmail dot com. And, uh, yeah, it's kind of fun right here. We see Facebook, Twitter, Google, LinkedIn, these air obviously those links to those things. And here's a GRF where the actual link is limbs. And you're just gonna replace this with, you know, facebook dot com Doctor after John, right? And just go through here and change each of these for Twitter for Google. Plus, is that even a thing anymore for linked in and for Pinterest? Now, you your dentist probably doesn't have Pinterest, so maybe you want to get rid of that one. Well, we can just grab the whole thing and delete it and done So let's save this and come back over here and hit. Really? Remember here is that Pinterest one. Now it's gone. Tenzer Ber Street, New York, New York 12345 dr John at gmail dot com Okay, so this is a sort of silly thing, but it's important, you know, You may not know html that good that good. You may not know each team all that well, but you don't really need to. As I think you've seen just now, you just got kind of eyeball this and come through here and just kind of figures it out right. It's not that complicated. HTML is not really a programming language. We kind of treat it like it is, but it's not. It's a markup. Language and markup. Languages have opening tags and closing tags, right? And just text in between those tags. So it's pretty easy to come through here and just tweak all of this stuff as you want here says we believe everything should have easy. Everyone should have easy access to great dental care. Well, where is that? Do you believe everyone? And right here. Let's come back. We believe everyone should have easy access to great dental care. You want to change that to something else? Well, we just found where you and change it. My name is John Elder, and I'm the greatest darn dentist who ever lived. That's right. No. If we save this, come back Here it reload. My name is John Elder on the greatest darn dentists who ever lived. That's right. All right, so just come through here, start weekend, just change these things. Find all the things that you want to change and start changing them. All right? Maybe your dentist doesn't want this pricing thing on there at all. All right, I would just come here. Can hit control f our little search thing pops up type pricing. Hey, look at this into pricing table. Area start. We scroll down in tow, Pricing table area end. Well, let's just go right ahead and delete all this and save it. Come back here and boom, it's gone. Right. So you could tweak all this stuff just that easily. I happen to actually like that. I'm gonna come back here and control Z toe. Put it all back in, Save it again. And now it's back again. So just that easy to kind of go through here and start tweaking in the next video. I'll show you how to start adding your own images and things, and that will be in the next video. 18. Add Custom Images: Okay, so you've gone through here and you've sort of updated the copy, the text and things for all the things you want to change for your specific dentist. You know, you've put different names for each of these of the actual dentists you're dealing with etcetera. But now you need to change these actual images because your dentist wants their own picture right here. Right? So how do we do that? Well, that's we're going to talk about in this video, so it's very, very easy. And the first thing I do is I always right Click on an image and click view image and usually appear it will say how big the images This one is 600 by 696 pixels. So that's 600 by across by 696 downs or within haIf. Right. So you really want an image that's pretty much that same size, and this is probably work for photo shop. Your dentist is gonna give you a bunch of pictures that they want on the website, and you're gonna have to kind of resize them, most likely in order. Teoh, make them look good here and This is not a course in photo shop. If you need to learn how to resize images, this is not the place to learn that you have to learn that somewhere else. You can google it. There are APS online where you can upload your image and tell it what size to resize it to . It will resize it and then download it back to you. You could do something like that or you can use photo shop or you can use ah free version like something like gimp is a free of Photoshopped clone Open source s so you can play around that. I'm just gonna assume you already know how to change the image sizes of your images. So now we just need to figure out how to get these things into our app to start using them . So, uh, like I said, you want a view image and then look at this static. You are l. So it's in our static directory in our website directory, of course. And it's an image, and then BG image and then 15 is the name of it. So we can head back over here to our app here and then click on static website and it was an image I am G And then it was also NBG image and it was just 15. And here it ISS So we need to replace this 15 image with whatever image we want. So I'm gonna open a file Explorer wrote Quick here. And I've got some an image and I've saved on my desktop. So I'm gonna go over here to desktop, and I saved it in a folder called Dental Images. And here it is just a picture of a dentist. So what I want to do is open another file Explorer. So let me do that. And just going to my Windows Start menu typing in File Explorer and it pops up. And now we just want to navigate to our app. So it was in dentist for dental and then dental again static website images, BG image. And then here's where we want to be. So let's find that 15 1 yet there it is. Okay, so all we need to do is now kind of drag our image into this directory. Boom. There it is. And it's called dentist that J peg. There it is. Dentist Dodge a pig. Now we could either right click and rename this file having first right, clicked and deleted this file. Or we can just search for a 15 Dodge a peg in our HTML file and change it to dentists. Dodge a pick. And I think I'm gonna do that a little less destructive. So I'm gonna come up to our home page, and I'm just gonna control African to search. And we just want to search for 15 dot j peg up. There it is. And we can not just change this to a dentist. Okay, So let's save this and head back over to our web site here and hit, Reload and boom. There it is. Now we've got our dentists picture. It's just that easy. And you're just gonna want to come through here and do that for each of the images that you want to change, which is gonna be most of the images. Some of these things like this thing in the background here. This guy here, you might keep that, uh, this child, you know, you might keep that all of these things you might keep here is a video. Check this out. So We'll look at that next video, I think, but yeah, we're coming right along, so I'll leave this to you. You can come through here and customize all of these images just the way you want. Even these background images themselves, right? You can sort of look through the code and figure out where those are change him. Just like we just changed this one just now. So, uh, same thing here for this dental logo if you want to get rid of this logo, Right, Uh, back over to our code. Go to the very top here, Start looking for logo. Where was that at? Right there. You see? Right here. Here's that image for that logo. Right. If your dentist has their own logo of or if you create one for them, you'll just make that change right there. So pretty simple, pretty straightforward. Takes a little bit of groundwork to actually go through and swap out all these images, But it's relatively easy to do, and that's cool. So in the next video, I think we'll look at that video we just looked at, and I'll show you how to change that. And that'll be in the next video 19. Add A Video: okay. This video, I want to spend just a minute talking about this video thing here. So this is, ah, fake thing. It's not actual video. Nothing actually happens here. So we want to replace this by with an actual video that will play when we click on it. So there's a bunch of different ways to do this, and we can get into all kinds of crazy coating things. But I'm just gonna copy and paste that YouTube video there, and that should work. So I'm gonna head over to YouTube, and I'm just gonna go to my channel. You haven't checked it out? Definitely. Come over here and subscribe. Teoh Kotomi dot coms, YouTube channel. And, I don't know, just come through here and videos and I don't know, Scrabble Random one and let's click share. And then I could grab this in bed thing right here, and I could just copy this whole bit of code. And now we can come back here and just replace this image with that code, right? Just that easy. So to do that, I'm gonna come back to our home page, and I'm just gonna control f and type in video And when you do, you see a little video area, and we see right here is the div that has the dental video area. Right? And if we click on it here we see down here, the closing div tag highlights. So that's how we know what to change. So that stuff between those two tags we can just delete and then paste end that code we just copied from YouTube. So if I control asked to save this and head back over here and click Reload. Now we've got our own little YouTube video. If we click on it, it just works. So if your dentist has their own, I'm a little opening credits like that both mad, right? If you're your dentist, has a video on YouTube. You wanna put in there, Go for that. I like video with video. You can customize the player and get rid all this things here, right? Some of these things so it might look a little nicer or whatever. You can customize all that. You think you can even customize some of this in YouTube, but I'll leave that all to you. That's just how you change that little thing, right? there is video, so it's a little different. So I thought I'd make a whole video and I'm explaining it and really pretty much that simple. So I think that's all for this video. In the next video, we'll start to talk about building out some of these other pages and that'll be coming up. 20. Contact Page: Okay, so we've got our website. We've got our home page built out. Now it's time to start talking about some of these other pages. So I'm gonna go back over to our original template website, right? So just we can look at these. So there's a lot of things toe look at. We gotta pricing pages kind of cool. We've got a service page that we could mess around with. We got an about page we could mess around with. That thing I want to look at right now is the contact page to check this out as cool little map at the address. And it's got this form that we want people to be able to fill out and send us an email. So we're gonna start to work on that in the next few videos, gonna take us a few videos to get through that that email system to set that up. But in the meantime, we can at least build out this page and start to look at this map and things like that, and that's we're gonna start to look at in this video. So what we can actually do is just head back over to our template files that we unzipped way back when right. You could see some of these other pages air already there, including this. Contact that html page. So I'm just right Click on it and click. Copy. And then, just like we dragged and dropped earlier to get all these files. And I'm just gonna open another file Explorer, go to my local, see Dr find our dental directory and then on another other dental directory. And now this is not a static file. This is actually a template file a website template files. So we go on our web sites templates, and right now we just have this home dot html. But I can right click and click paste and boom pace right in. So we go ahead and close that and that. And now if we head back over here, we see now we have this contact page. So remember when I said earlier when we created our first home page, our first Web page? Whenever you build a web page in Django, it's always a three step process. You have the HTML template we just put in there. You have a you Earl, and you have a view, so we need to do those other two things real quick. So let's head over to our you or else not pie. I was going to copy the one we've already got. Paste it in now for the path we want this to be contact dot html could put anything you want, but that seems logical. And for the view, we want contact, which we don't have yet, but we'll create. Let's name this contact. So I would say that and that's all there is to it for the girl. Now for the view. I'm just gonna copy this guy and let's just name this contact and we want to render request contact dot html. Go ahead, save that. Now we can head back over to our app and click on this contact thing and boom, we've got this page now, just like with the home page, we have to do all the static tags and stuff. So let's start to do that road. Quit now, and what I can do is just go back to our home page and grab our load static tag. We need to put this on every page that we want to use static stuff. So I had that. And let's go back to our contact at HTML. And remember, Now we just have to Let's go to our home day, Shimo. We just have to add these static tags to all the references of CSS, JavaScript and images on our new contact base. I'm just gonna copy this and head back over here. Oops. And let's just right here, Paste this in. Let's get rid of this. We need a something we can copy and paste each time. So let's go through here and do a couple of these. I'm not going to do a mall on camera, but just to refresh your memories, here's the fabric con. So we'll put this one in here and let's grab this and paste and okay, that looks good and do a couple more while we're here. Here's our style, that CSS so we can do that. Remember, we didn't put this in the root directory. We put this in the CSS directory, so we have to make that change. Okay, that looks good. Now I'm just gonna hit control f and pull up a fine thing and just go through here and look for the PNG files. There's not many. So we'll just do it right quick by hand. There's that. Maybe there's one mawr. Copy this again. And this should be old hat. You've already done this before, but did you just do a real quick here? And those two things copy? So it's very exciting work, right? Okay. And it find again. Okay, that's all The PNG now weaken do J Peg. I think there's two of those, so we'll just search for J Pig. And there's one place that in it's that in Cubby like that. Okay, almost there. One more, I think. Yep. There it is. So based there a copy. Glorious, glamorous work. And OK, that's all. And then finally, we need to search out that Java script files in here. Here, there are down at the bottom. So let's just gonna paste in for each of these real quick and then come and copy and paste . Uh, copy. Haste. Almost done. Bear with me. I know this is very boring. Could have done this off camera, but, you know, there's only a few of these on this page, so might as well just do them all real quick Okay, so let's save this. And now head back over here and hit, Reload and hopefully, boom, it now works. So this video is getting a little bit long. In the next video, we'll take a look at this map and I'll show you how to update that with any address you like, and that will be in the next video. 21. Change The Contact Page Map: Okay, so we're starting to build out our contact page. So far, it's looking pretty good. Got all the CSS worked on, and we've got the static tags, all working, So everything's looking good here. Now we want to look at this map, and you can see it looks like this is Latvia s. Oh, this is definitely not the map We want to show up here. So how do we change this? The map? Well, if we head over to our code and just started the top and kind of scroll down past, uh, menu bar we see right here, contact areas start. And we see this Google Maps class, and we have this I frame that has this long You are l Well, this your l is the Earl of the map that's being showed, so we just need to change that to whatever map we want. So how do we get a map that we want within a specific address? Super easy. Just head over to maps dot google dot com and search for whatever area you want. So I used to live at 10 West Elm Street in Chicago so we can grab a map here it looks like there's construction there at the moment. Eso here's the map, right? And we can kind of ah, scroll out or scroll in so whatever we want So if we want, you know, really close we could do that. I'm just using the the wheel on my mouse to scroll in and out. You can also use these plus and minus zoom things down here. So my old Oak Street beach I miss it. Lakeshore drive. Chicago's fun. But, man, it's too cold. Hancock building is right here. So anyway, let's say we want ah say we want this. This looks good to me. We can come over here not to share and click in bed a map And here is that I frame that same exact I frame so we could go and copy this whole thing and head back over to her code . And I'm just gonna come right here and paste this thing Control V or you can right click and paste and we can probably leave it like this, but the within the height are probably different than what we want. So instead of doing that, I'm just gonna copy all of the stuff in the quotation marks of the SRC here, the source of this and I'm gonna come down here to the original one, and I'm just gonna delete that and paste in this new stuff. And then I'm just gonna get rid of this. I frame completely. All right? I mean this up a little bit. Now, if I control s to save this and head back over to our app and hit reload room Now, you see that exact map we were just looking at Here is 10 west down there is my Oak Street Beach is the, uh Oh. Where to go back The, uh, Hancock building right there. Very cool. Now you'll notice this is different, so we need to change that. So let's look at that road quick while we're here and just here it is, right here. Now, look, the default is Chicago, So 10 west l'm ST Chicago. I think the zip code waas six or 610 and you could change the phone to whatever. Right? 123 123 On 234 Maybe you want to get rid of facts completely. You can change this, Dr J or whatever save this head back over here it reload and boom. Now this changes. There's our address. There's our phone. There's our email. The map is still the same, you know is right here, has the address again and you can click for directions. Or you could view a larger map and it opens another Web browser. So very, very cool. And, uh, not too too hard. Now this up here is just our home. So we can change that if we want Come up here, scroll up until you see this breadcrumb area and here is home and it's pointing to this. We could just change this to we can create a Django U R L and just type in your l and then home. Why home? Because remember our Euros, that pie file. We named each of our pages home so we could just reference that name just there. And that's how that works. So if we come back and hit, reload now, if we click this boom, it goes to our home page, that's that's cool. All right, so this contact page is coming right along. I think that's all for this video and the next video. We'll start to look at this bad boy, see how to actually Ah, send email. We'll start to look at emails going. Take us a few videos to get through email. It's a little bit tricky. Not too bad, but a little tricky on. I'll show you how to process the forms at least, and we'll look at that in the next video. 22. Build The Contact Form: Okay, so we've got our contact page is coming right along. We've got our map. Now we want to start to look at this form. And in this video, I'm gonna show you had to. Actually, if somebody fills out the form how to send that information to our Django app, so then we can then later send ourselves an email. But first, we have to learn how to process this form. First process the actual data before we can then send an email. So that's we're going to do in this video. Now head over to our contact at HTML page. Let's just scroll down until we come to see. Looks like Well, actually missed it. I'm gonna come to the top and let's just type in post. And here we see form action. Nothing method equals post. When you send a form on the Web, you're posting data from the form. So and we can also see form here. So now we know we're in the right spot now, in order to use forms with Django, and that's what it is. It's a web form. We need to create a tag called a cross site request forgery tag something like that. See, SRF tag. And what it does is it keeps hackers from a from being able to hijack those forms. It's just something you always have to do. So it's just a basic Django tag and its CS R f underscore token. And that's all we have to do just underneath this form action. So now action means where do we want to send this form? Well, we want to send it back to our contact page, So let's create a Django link and let's call this a u R l. And we just want to send this back to our contact page, all right? And the method will be the same post. Okay, so go ahead and save this now. And our views. DuPuy, In our contact view, we need to do some coding now, this is gonna be the first time we've actually done some like, hardcore coding in our views because this is just basic coating. We were not really doing anything interesting. Now it's time to do something interesting. So whenever a page is loaded, you're getting that page get versus host when we're filling out a form so we can determine whether the page should be. Get it or posted so we can do this using an if statement so we could go. If request dot method equals host, then do stuff else, uh, do some other stuff, Do other stuff or you just say or just return the page. Let's make a comment return of the page. So what we're saying here is if somebody fills out the form, they're sending a post. If that happens, we want to do something. Otherwise, if they're not filling out the form, then they're just trying to look at the Web page. They're just going to it. If that's the case, we want to just show the page, right? So that's that's what that is. So now we want to grab all of the stuff from that form. So if we head back over here, we could see there's three things three bits of data that this form is going to send back to our view. So what we can Dio is look at that page again, and we need to find the names for each of those things. So here's our form, right? If we look through here, we can start to see Well, here's an input box. Here's an input box. And here's the other input box. Text box. The bigger one. Well, what are these things called? Well, this one's called message names on the copy this. Bring this back over here. Message name. Ah, let's see. This one is message email. Copy this Such email. And the last one is just message and you see what it's in? The name. Name equals message. Name equals message. Email. Name equals message name, right? That's where I'm getting that. So what we need to do is create variables for each of these things. Now, this kind of we want this underscore because this is Python. But now we can just set this equal to something. All right, Well, what do we want to set this equal to? Well, for each one of these, we want to pull the request. U u e s t dot host, and then whatever the thing was called on the web page, So just copy this. Copy this. So the 1st 1 was message name, but with ah hyphen, not an underscore. The next one was message email, but with a hyphen, not an underscore. And the last one was just message. Right? So what we're doing here is grabbing each of these things from the form and putting them into a variable that we can now mess with. Here on the back end, for instance, we can now send an email and weaken propagate that email with these variables. Okay, so this video is getting a little bit long. We've got our stuff here. I'm also gonna just grab this and post this outs that weaken return the page itself. And I think that's all for this video. In the next video, we'll start to look at this stuff, and we'll test this to make sure we've properly past this stuff from our Web app to our back end here. And we'll look at that in the next video. 23. Build The Contact Form (part 2): Okay, so we think we've passed this stuff from the form to our back end, but we're not quite sure yet. So we need to play around with this a little bit to make sure that we did. So remember when we first created these guys this home? We put this thing here, but I never really talked about it. That's called a context dictionary and allows us to pass stuff from the back into the front end. So we've got these three variables. We can pass them into the context variable to make sure we've got them correctly. So let's do that. Let's let's do the um Oh, I don't know the message name. So I can take this and I can just put a single quotation marks and then a colon and then this. So this is the variable, this right? And we're passing it into the page, and this is a python dictionary. So this is the key, and this is the value. We used the key to reference it to call it. So that means weaken reference this guy on our contact page and do stuff with it. So I'm gonna copy this, and that's going to save this and its head back over to our contact page. And here it says, Get in touch. I'm gonna put, get in touch and then open and closing tags. Now, these tags are a little different than the other Django tags we looked at. Up until now, you'll remember the other Django tags like the static tag. They all look like this. This is the open. And this is the clothes, right? These guys are just double brackets. Well, the reason why we do this is because we're passing a variable. And when you pass a variable in Django, this is just the tag that you use. I'm not sure why. That's just how they have it set up so we could save this now and we can come back and let's reload our page here and you'll notice we're getting the page. So we're not posting anything. So the page just loaded right? So now and this is getting touch and has this dash right? So now let's type in John and I could say John at kota me dot com, Let's just test now. Let's send this. And if it worked, it should reload this page but it will have passed. Look that John in there. So that's very cool. Now we don't want to keep it like this. I just wanted to do this just to show you how to pass variables around and also to prove to ourselves that the form is working correctly. We're able to pass our name John, to the back end, turn it into a variable, and then bring it back onto the home page itself and put it up on the screen. So that's very cool. And that sort of proves to ourselves that the form is working right? So now what we have here and I'm gonna get rid of this because we don't need that necessarily. Save this. Let's head back to review. So now what we have is we've got two separate sections here of our contact view. We've got stuff that gets done if somebody posts. If somebody fills out the form and we've got stuff that gets done, if they don't fill out the form, they just come to the Web page. And there's nothing really going on here, right? We're just showing we're rendering the page. If somebody comes to it without filling out the form. But if somebody fills out the form we can now do stuff with with, this would've whatever they put into the form. So we're all set up now. Now we have to do is start using the Django email system to set up a system that allows us to email whenever somebody fills out that form, because right now we're just sending it to the back end and we're not really doing anything with it. We're just putting into variables, and then that's it. So it's just one more step to then send that stuff as an email, and I think we'll start to look at that in the next video. 24. Send Email With Django: Okay, we're ready to set up our email system. We've got our form all set up to where somebody can fill out the form, click the button when they do it sends their information back here to our contact view, which weaken imports out into separate variables for each item of the form they filled out . Now we want to actually do something with that. We want actually send ourselves an email saying, Hey, somebody just filled out the form. Here's the stuff they typed out onto the form, right? So how do we do that? Well, it's gonna take us probably a couple of videos to get through. This is not particularly tricky, but there is one little tricky part about it. We'll talk about that when we get to it. So the first thing we need to do is import the email system that Django requires. So we can just do that. It's half of our views that pie file, So from Django core mail we want to import, send mail and send mail is the thing that sends mail right? Makes sense. So let's go ahead and say that now we need to come down here and inside of our if statement , we need to do a little bit of coding. So what we need to do is create a send mail function. So it's right in here. Let's make a comment. Send email. Right. We need to call a send underscore male function. Right? And inside of this function, there are four things. Right? So we could put this on multiple lines and the things are separated by commas. So the first thing is the subject, So I'm just gonna type and subject as a has a comment. So we know the second thing is the message itself, right? The third thing is the from Who's it from? From email. And then the last thing I guess we could put a comma we don't really have Teoh is to email . All right, so let's just knock each of these out. So the subject, what do we want our subject to be? Well, if we want to actually have some text, we can say, I don't know. Email from website. Yeah, website message. I don't know personally. Instead of a subject line and for subject, it's the subject line of an email. You understand? You know, when you get an email, there's always a subject line at the top. That's what this is. But instead of putting a subject, I'm just gonna put the message name. This is the person's name, right? We go back and look at our form. That's whatever they type in this box. Their name, right? So the subject is gonna just be the person's name. Or, you know, we could do something like, I don't know, appoint ment and then do that right. I'm just gonna put message. Name the message itself. Well, that's this message. Variable. Do that. The from email. That's the message email. Who's sending it? Person who's filled out the form And remember, that's just gonna be, you know, this box right here. And finally, the to email is a little different. This is an actual python list, and this is just gonna be Where are we sending this mail like this is probably gonna be the doctors email. So, you know, if it's, you know, doctor J at gmail dot com. Whatever, you would put that there for our purposes. I'm just gonna put my email address John at kota me dot com, Whatever. But you would just put the doctors email right? So go ahead and save this. And usually there's one more line we put in Here we go fail, underscore silently equals false, um or true. If it fails, you want it. Teoh, throw up in error message in our terminal so we could see what the area is. So we put that it's false now in production. You would probably change this to true, I guess. But believe it a false for now. OK, so that's part of what we need to dio now. There's one more part we need to do in order to get this to work now. We've already we've added it. We've imported send mail. We've got her actual code to actually send an email. That's pretty straightforward. Now we need to make a quick change. The settings dot pie file in order to make sure all this works correctly, and I think we'll look at that in the next video 25. Send Email With Django (part 2): Okay, so we've got our send mail set up. We've got the code written, actually send the email, but we have to make a change for our settings that pie file. So head up to our dental directory and our settings dot pie file. And we played with this file a little bit before. Remember, we added, are apt to it. And, uh, here at the bottom of the page, we added the static filed jurors thing. Same thing. We just need to come down here and I'm gonna add some space here. And we did make a couple of changes. This is gonna be a little tricky because it's gonna be dependent on the email system that you use or the email service I should say that you use. So if you use Gmail, it's gonna be a certain way. If you use your own sort of website address in your own S t e m p SMTP server uh, you'll use that if you know if you're using I don't know a O. L mail. This will be different if you're using Hotmail. This this will be different now. Some email services allow you to send mail through the service. Even though you're, like, not logged in on a website, like, for instance, Gmail allows you to do that. Some don't. So it really is just going to depend on what email service the doctor is using because the doctor is gonna be the one that gets these emails, right? So I'm gonna show you how to do it with Gmail. And, uh, hopefully, you know, everybody uses Gmail. So if if your doctor your dentist doesn't use Gmail, you're just gonna have to Google how to use, you know, if they use Hotmail, for instance, just google something like Django send mail Hotmail and you'll find a tutorial on how to do that specific system. But it's gonna be mostly the same. The settings were just gonna be different. So the first thing we need is the email underscore host. And this is gonna be whatever service you're using. So s m t p dot google dot com, I think is the Google one. Next, you need an email underscore port much like our Abbas on Port 8000 on the Web browser and email system need support to, So it's likely going to be 587 for Google. Then you need a email. Underscore Host underscore user. And this is just gonna be, you know, the doctors email address. So, dr J at gmail dot com or whatever. Right? And then you need a email under scorer, host, underscore password. And then this is just the email password, you know, and doctors. Dr Password, Whatever it is now, you may not want to put the actual password here because later on, we're gonna push this code up online, and so you don't want their password just open and available to the world so you might use an environmental variable for this. I'm gonna talk about environmental variables. Super easy. If you just Google Django environmental variable too immediately See how to add of environmental variables. Eso email host Password. Next, we need either email. Underscore Use underscore. Ah, TLS equals true or email underscore. Use underscore s s l equals true. Uh, it's likely gonna be TLS, and if so, you don't need this at all. But depending on the email service that you use, one might require used TLS. The other one might require use SSL. So that's just how you do it. And finally, Now this may work. Smtp at google dot com or you may have to do gmail dot com. Sometimes Google works. Sometimes Gmail works. It just depends on who knows what. You just have to try both ways and see which ones work. Which one works for you now? One more thing you need to do, and this is what the dentist is gonna have to do. They have to go to my account dot google dot com slash less secure APS. And when you go, there's this thing that you can toggle on and off, and now I have it set toe off. You need to turn this toe on. So you need to just click this thing here. I'm not gonna do it for my account cause I don't want to. But in order for this to work, you have to do that. So when you do this allows third party APS to send email through your account, right? And this what we're doing here, we're creating 1/3 party APP are Django website that wants to send email through your account. So that will work. Um, after you click this and when you do this, you'll usually get an email from Gmail from Google saying, Hey, somebody just turned on less secure APS Is this you? You're gonna want to click on that email and click. Yes. And, you know, give them permission to do that. And then that will start working. So that's basically all there is to sending email through Django in the next video. I'm gonna show you another way to do it, using just local host and the SMT, SMTP SP, whatever that is server that comes with Python and just for fun. And I'll show you that in the next video. 26. Send Email With The Development Sendmail Server: Okay, So I showed you how to set up email on how to send email using Google using Gmail in this video. I want to show you how to do it. Just a test version. So say you're building out this app and you don't want to connect to the doctors email just yet. You want to make sure it all works correctly and everything first. Well, we can use just local host to send email using sort of a test server. And as I'm gonna show you how to do in this video So let's head back over here and everything and arv used up high. This all stays the same, right? The only difference is these things change. So what I'm gonna do is use three quotation marks, single quotation marks to comment all that out, and instead we're going to do using sort of a test version. So to do this, we go email, underscore host, and we sent this equal to a local host. And that's the same local hosts that we're using here, right to test out our website. So local host, I'm gonna go email underscore port and I said that's equal to 10 25 Because that's what this little server runs on for our email. Our test email. So for email, underscore Host underscore user, I'm gonna set this to nothing for email. Underscore Host underscore password. Gonna set this to nothing because we don't have a host or password. This is just for testing purposes. And then for email, underscore use underscore TLS. I'm gonna set this equal to false. We don't need to use encryption or anything, and that's all there is to it. So now we can save this file and we need to actually turn on our little fake email server. And I'm gonna make a comment here, and I'm gonna paste this in. This is the command we need to put into the terminal to run our little debugging SMTP server. But we need to create or we need to open up another get bashed terminal in order to do that . So I'm gonna do that road quick. Let's just hold us over here and we need to CD and to see dental. And then we need to turn on a virtual environment. So source virtual scripts activate, and then we need to CD into dental like us we don't really need. Teoh, we see are managed up. I file so we know we're in the right spot. So now we can paste in this command and I'm just gonna copy it again and paste. And so it's Python, dash M and SMTP Dash in desk Desh, see and then debugging server. And then we wanted to run on local host. 10 25. Why 10 25? Because that's what we designated right here, right? So when we run this, you could see nothing appears here, but sort of just like with our other Web server. It's waiting. It's listening. So now we can come back to our home page here and let's give this a quick reload. Let's just go here and let's put in. You know, say Bob Elder and Bob at She was one of my email addresses, Johnny for 196 at gmail dot com, and it's a I. I would like to make an appointment I could spell on Monday, February 12th. I don't know. Thanks. Now if we send this message boom, this page gets reloaded and it's been sent, we hope, but we don't know. So maybe in the next video, we'll put a little thing up here at the top that says your email was sent successfully. We'll look at that next video, but for now we can come back here and nothing has appeared here. But, uh, we we hope it's worked. If we look at our are other system here, nothing has changed except for this. Page is loaded, so everything looks good there. It's now the only thing to do is wait and see if this email went through or not. And it usually takes a while to send this email using this fake little server. It's not a fake service, a real server, but it does take a while and look now. Boom! It popped up here, so let's look at this. It says Subject Bob Elder from That's the email address I put two. This is our doctors email that we designated interviews DUP High file, right? And then here is the actual message and it says n message. So it has now been sent. It looks like, and it took a minute or two for this to pop up, and I'm checking my email right now, and it hasn't come through like I said, it takes usually, I don't know, 10 minutes or so for this to pop up. So I'm gonna go make you wait until this appears in my email for this video. I would assume it worked because it showed in this server that it worked. And we'll confirm that later on when it pops up on my email in a later video or whatever. So that's all for this video. It looks like our little test email server is working those the two ways you want to send email. Why would you use one or the other? Well, you want to use this version while you're just developing the website to make sure everything works. And then when you sell the thing to the doctor, you're gonna want to turn off this fake thing here and switch it back to like we did in the last video using Gmail or whatever email service your dentist uses. So that's cool. So that's all for this video In the next video, we'll finish this up by adding a little message that pops up right here when somebody sends an email and that will be in the next video 27. Create an Email Response Page: Okay, so we've got our contact page. It seems to be working pretty good. Um, at least the development email went through. And so now whenever we send an email, when every fill out this form and click the button, it just reloads this page. And so the person that's just sent the email doesn't really know. Did my email go through? You know what's going on here? I'm just seeing this page again. So we want to probably change that a little bit. So let's do that in this video. So I'm gonna head back over to Let's see my contact at HTML page and let's scroll back up to the top here and let's find the breadcrumb, Um, just scrolling, scrolling, rolling, breadcrumb areas start and breadcrumb is, well, this up this thing right here. That's what's called a breadcrumb, right? So we know, right? Bowed, neat, that is, our map should be. And there it is. So let's just put some stuff here. Let's go h one or let's go H three. Hello and let's save this and let's come back over here and hit Reload. Actually, let's go to contact and boom. We see this. Hello appears right there. So maybe we want to center that I have an opening closing center tag. There's probably a better way to do that, but that works. Hello. Underneath here is the map. So what we want now is to make some changes to this page based on whether or not somebody filled out the form. So if they do fill out the form, we want to put a little message right here that says your form was sent successfully. We'll be back to you as soon as possible, right? How do we do that? Well, let's head back over here and let's go to review Stop, I file. And remember, when somebody fills out the form, it does all of this stuff. And then it re renders back up that new Web page, right? And when it does, it sends the message name through. Well, the message name is the person's name, right? So instead of hello there, we could reference message names. Let's do that road quick. We head back over here instead of Hello, right there. Let's go Message underscore. Name right. But we only want this to appear. If somebody's filled out the form so we can dio a quick if statement so we could go if message underscore name. If there is a message name, then do this. I'm just gonna in Dent there and then we can go. And if so, if the form has been filled out, we'll have a message name? If If that's the case, we'll put this little thing. So we could we could make a little thing we could say thanks. Whatever. And then let's dio a line breaks and then we can go. We received your email and we'll contact you shortly, right? Whatever. So we save this Now we head back over and come back to our page. Nothing appears. Right? But if we come down here and we type in a name I don't know Hello and click send message when we dio Hopefully. Oh, what happened? Oh, uh, email server wasn't running, so he needs you. Copy this and paste this turn this turn The email server back office. And how if we hit reload. Okay, so this is Thanks, John. We received your email will contact you shortly. Uh, there's a lot of space in between that Maybe we don't want quite so many line breaks, so take one of those off. But whatever you get the idea, you could pull in any message you want there. You could put the person's message back in there again. All right, whatever. You can pass that as a dictionary variable. If you wanted Teoh and we'll just leave this thing here. Maybe after after this whole thing put a couple of line breaks, push that down further. So let's save this and run this again. I'm gonna make sure our email server still running. Okay, it is. Go back to our contact page. No message listed here. I'm gonna put Bill Bill at ted dot com. I want an appointment. Whatever. Send message. Thanks. Bill. Received your email on will contact you shortly. There's a little more space there, and that looks good. And I think that's that's good. You can obviously modify this to make it look any way you want to add anything, anything at all. There you can add a new image there with a receptionist saying, I got your email, whatever you want. It's all up to you and your creativity. And, uh, I think that's that's pretty good. So I think that's all for this video. In the next video, we'll start to look at version control so we can package all this stuff up and save it. And then after that, we'll look at pushing all of this on to Web hosting to make this website live, and that'll be coming up. 28. Version Control With Git: OK, in this video, we're gonna talk about version control and set up get yet version control. And in the next video, we're gonna push all of our code of get hub for third party safekeeping. So what is version control? Why have I waited this long to talk about it? We'll version. Control is super popular, super important for all coders. And basically, what it does is it keeps separate versions of your code. So as you're moving along as you're building out your code, it will save snapshots of your code. So if you're moving along and you've saved your code and then you start doing something and you blow up your app, right, you do some bad coding, right? You can turn back to an older version that still worked. It's just best practices. All coders use version control now. It's also good for teams, right? So if you're on a team with several people, you Kony, check out the code, make changes, and then put it back in and get will keep track of who made the changes. And it will combine all the changes together into the master branch. Right. So this is great because you know, if Bob over there does something to screw up the code, we can look at the get version control and go, OK, Bob did something weird and messed it up. We can then scale back to win it before Bob messed it up or whatever. So it's just any big team is going to use version control. Smaller coders, just individual coders should use version control. Just it's a good backup. You know, it's a good way to keep track of versions of your code over time, and the ultimate goal is to push our code up to get Hub, which is a free service that will host all this for us. And it's good because it's it's important to keep your code off of your computer, right? I've had computers that blew up, melted down for fried. I've lost all my data before. Well, if my code is backed up on get, huh, no worries. I can just download it back and under the new computer, and it works right away, so it's good for that. It's good. Forget Hub is almost like a social media website for coders, right? So if you're trying to find a job. You can make all your code public anybody can see and so potential employers can look at your code and go. Okay. She knows how to do this. This and this. I can see the coach he wrote right there. She will fit nicely in our company, right? So if you try to find a job, people are gonna look at your get have account to see how active it is, how long you've been coating to see your code to see how well you write code. So it's just super important. So in this video, we're gonna set up get version control. It doesn't take very long because our get bashed terminal already has get, uh, So I'm going to control sea to break out of our server. That's running. And that's why we like to get bashed terminal. It comes with get installed already. We just need to turn it on and start using it. So there's several steps in order to, uh, to get this set up 45 commands we need to do so. I've got these copied and I'm just gonna paste them in here, save time. So the 1st 1 is git config Dash, dash, global user dot name and then quotation marks. Type in your name, so that's the 1st 1 The next one is Git Config, Dash Dash global user dot email and then just put in your email address and get needs to know your name and email address because it keeps track of who's making changes to the code . So it needs to know who you are, right. The next one is Copy and paste get config Dash dash Global push dot default matching and it's been so long I don't even remember what all these do. I've just been copying and pasting these for like, 20 years. It doesn't really matter what they do. This is just what you do. So get config. Dash Dash global alias dot ceo, check out. And then finally, the last command to turn it on is get an it and when we do, we see boom. This master branch thing appears on the terminal and that's how we know get has been turned on. So okay, that's how we initialize it. That's how we set it up now. From now on, in order to save our code, we do two steps we do get add, period. And the period stands for everything. It's adding everything in this directory. Right? Okay, that worked. And then finally get commit Dash A M and then we need to give a little message. So I'm gonna say initial commit, and you'll see why in the next video why these little messages are important. So that's all there is to it. So we have now committed all of our code to our master branch of our get version control. Now, every time we make a change going forward into the future, we need to save our code in the same way we do get add, period, and then get commit. Ash am, uh, tweet home dot html. Whatever you did, you just put a little message in there, right? And that's all there is to it. Now, How often should you do this? Not often. So I always do it. Like at the beginning of the day when I start coding If then a couple hours in, I've done a lot of really difficult stuff. I'll save my code. If I just go and tweak, you know, a line here there. I probably won't save it to get, uh, to get until the end of the day and I'll just commit everything. So, uh, when you do major things to your code right before you do a major thing and right after you do a major thing, you should save your code to get. But other than that, I just do it once a day at the end of the day and you should be good to go. So that's all for this video in the next video, all she had a push all this code up to get hub to keep it safe, and I will look at that in the next video. 29. OK, in this video, we're gonna set up, get hub, so head over to get hub dot com. And if you don't have an account, go ahead and sign ups completely free. And when you do, we log in and should be at your profile. Now this is my profile. Get hub dot com forward slash flat planet. No, I don't think the world is flat. I just find it hilarious. Some people dio so that's kind of my inside joke. If you want toe, follow me. There should be a button here, a green button that says Follow or something. It's not showing up because this is my account. But if you come to this page, you should see that and you just get updated whenever you whenever I add new code or make changes to the code or whatever, so follow me if you want. Doesn't matter at all. But what we need here is what we need to do. Two things. First, we need a at an ssh key that allows our terminal or get bashed terminal to connect to get hub securely. After that's down, we need to create a repository and then push her code up to it. So let's do the ssh key thing first, just pull up our get bashed terminal. No, we're in our virtual environment. I'm gonna deactivate that for now. And what we need to do is create a new directory toe, hold our ssh key. So to do that, I type in M k d i r. And now we want to save this as tilled forward slash. This saves this in our default directory. In my play, in my case, I think it's ah, si slash Kotomi, or I don't know, we'll look at that in a minute, but we want the tilled thing is in the top right hand corner your or the top left hand corner, your keyboard forward slash and then dot ssh. Now, the dot in the ssh makes this a hidden directory. And we want this to be a hidden directory because our ssh keys, they're gonna be in there. We want that be hidden as a security precaution. So let's move into that directory CD, uh, tilled forward slash dot Ssh. And we can pwd to see Yeah, see, users coated me is mine default directory. Yours will be different. Obviously, so we're in this ssh directory. So now we need to generate our ssh keys. And to do that, we just type an ssh dash, He gender e x e and this will generate the things. Now it's asking us where we want to save these. We just want to say for right here. So we hit Enter. It's asking us to pick a password. I never pick a password. I'm just gonna hit enter to leave it blank and then I'll hit enter again to leave it blank if you pick a password every time you push your code up to get up, it's gonna ask for that password and that's a hassle. This is already a secure ssh key. I don't see any point having another password on top of it, so I just leave it blank. All right, so now we can time ls. And we can see these two files have been created and I d underscore. Are Sadat Pub is the file that we want. It's the public key that we need to now upload to get Hove. So I'm gonna clear the scream and let's look at this again so we can just catalog this to the screen with the cat command and then I d underscore arce dot hub and boom! This is our ssh key. So I can come up here and highlight the whole thing, right? Click and copy. And now we need to add this to get hub. So head over to get hub, come over here and click settings and then find ssh and GVG keys and then create a new ssh key. And you don't have to put a title, but you can. And we just want to paste this whole thing in. If it's been a while, it'll ask you for your password. Uh, see, what is my password? Incorrect area. And now are key has been added. Right? So now we can come over here and click on repositories, and this is you can see how that's where all my repositories are. Every time you create a new project, you create a new repository. And before we do that, I'm gonna head back over to our terminal and let's move back to our project file our project directory. So seedy. That was in den toll, O C D c slash dental. And is that right? Yep. So then we want to turn back on our first virtual environment. So source virtual scripts activate. All right now we need to move into our dental. I can type dental directory and we see the master branch. So we're probably in the right spot. You can type in ls we see there's the managed up. High files were definitely in the right spot or virtual environment has been turned back on . So everything's good. All right, so now we need to head back over to get help. And let's create a new repository. Click the new button and I'm gonna call this. Ah, then told Django, I don't know and you can keep it public or private. I wanted public. I want people to be able to see this. E I never make things private. Nobody's trying to steal your code. If you're in some super secret startup, sure make it private, but who cares? And either both of these air free. All right, so then create repository. Now there's one more thing we need to dio. We need to come down here and we need to push our existing repository that we made in the last video from the command line. So we need to add these two commands to our terminals. I'm gonna copy the 1st 1 and right click and paste. Okay. And then I'm gonna come back over here and copy the 2nd 1 Copy based. And now this is pushing it up. Now, are we sure we want to push this? Yes. Okay, it's doing its thing, all right? And it's done. So now we can come back here and hit, Reload. And we see this dental Django repository with all of our code that we've been working on and notice right here. It says initial commit. That's that message that we put in the last video when we committed our code. And that's why it's important to put a message there because we can look at this at a glance and see changes to our code. So let's make a quick change and walk through how we do this from now on. So I'm gonna go the home page and I'm gonna come up here, get root, get rid of some of that stuff, And ah said Dr John Smith, I want to make it Dr John Elder, save this file. Okay, so we've made a major change door code. How do we push this to get help from now on? Well, we already sort of know how to do it first. Let's clear the scream. We go get add, period, just like we learned to do in the last video. Then we get commit Dash AM and I'm going to say tweaked title of home dot html. All right, all right, so we've committed the change. Now we need to push it up to get husband. How do we do that? Just typing. Get push now on. That's how we do it. Those three steps and OK, it looks like it's dumps. And now we can head back over here and we can hit reload. And when we do oh, look that tweet title of home that html commit message appears. Which, again, is why it's important to use those commit messages so we can see at a glance changes to our stuff. And if we click on here and click on templates again and clicked on home that html we see, there's our code, and Dr John Elder, D MD. Who says, right up there at the top, the change we just made very cool. So let's see if we play around with this. Just kind of looking through here. Not much. Weaken Dio. We can look at the history, right? Well, here is the original one or here's the original one. If we look at it, we can see Let's see here it says Dr John Smith instead of Dr John Elder, so we can look at bits and pieces of our code over time as they change. It's very, very cool. So that's get let's get hub. That's version control. We are one step closer into pushing our code up to actual Web hosting. They make this website live, and we'll start to look at that in the next video. 30. Intro To Heroku For Webhosting: Okay, so we've got our code set up with version control. We've pushed it up to get home for safe keeping. Now we want to start talking about Web hosting and in the next few videos we're gonna set up her at for Web hosting and actually push it live online and make it show you exactly how to do that. So we need to do a few things before we can push it up to Web hosting. So that's we're gonna be talking about the next few videos. So there are just a ton of options for Web hosting out there. Almost infinite. And there are none that are better or worse than the others. I mean, some of them are better or worse, but it really doesn't matter. I'm going to suggest to use something called a Roku. Broke has been around forever. They're super professional. I've been using them for, I don't know, 10 years or something. And they're great for things like Ruby on rails, Node, Django, More complicated Web frameworks where you're pushing up a lot of code. So I like him a lot, and I suggest you use them, so let's head over and check it out real quick. Roku dot com Now they have a free tier that we're gonna use in this course, and you can use as well. Like I said, it's It's absolutely free and hopes I'm actually logged in here so you can't see. Let's see. I might have to log out. Okay, so this is her Roku, and it's just her Roku dot com, h e r o k u dot com and you see they have a free tier. If we kind of see let's find the pricing page, there's a free tier, and that's we're gonna use in this course right here. And the thing about the free tier is it's not very powerful. It's OK to get your website up in online, and if a couple of people go to your website at once, it's fine. If you know a handful of people go to the website at the same time, it's gonna be very slow, right? And also, if nobody goes to the website for a while, it goes to sleep, and then when somebody does come to it, it takes a few seconds toe wake up. So that's a little slow, right? So the free version is not something you want to use for your actual dentist website. When you sell it to the dentist, right, you're gonna want to sign up and pay for other Web hosting in the hobby version of seven bucks a month. It's probably good enough for a small town dentist, right, But you can also scale up very easily. So one dino month is $25 in a dino. Think of Dino's as, like horsepower right behind the scenes. It's It makes your website faster and better, right? So you could see this one is 25 a month to is 53 75 all the way up to, you know, $2500 a month now. You're never gonna be anywhere near here. As a small town dentist, you may need one. You may need to, right? That's probably all you're ever gonna need. And the nice thing about this is it allows you to scale up a website as it's needed. So as it becomes more popular as more and more people use it, you may be more Dino's, and it's easy to scale up in your account just by clicking a few buttons, and you don't have to know anything about Web hosting servers back in stuff in order to scale these up and pay more to get a more powerful website. So that's what we really like about Hiroko. So we can also push our code straight from our command, prompt straight from our terminal right up to her Roku. So that's nice. We don't need any other software, but we do need well, we do need some software to do. We need a little plug in that we need to install that allows our terminal to connect ahorro que, and we'll look at that next video. But you just take a look at this Roku sign up. It's completely free to sign off. It's completely free if you use the free tier, which we will be in this next few videos. They may ask you for a credit card they use two years ago, and that's just to confirm that you're human. They won't ever charge that card unless you sign up for something. You know, if you sign up for the hobby account or whatever, it's seven bucks a month. Well, then they'll charge the card, but otherwise they will not charge the card. It's completely free. And that's cool. So that's all for this video. I just want to talk about the this hosting solution that we're gonna use in the next video . We'll jump in and actually start setting all this up and, uh, should be fun. 31. Install The Heroku Toolbelt: Okay, so we're gonna use her Roku for our web hosting. So now it's time to download a little tool that we're gonna need so that our terminal can't connect to Roku on the back end there. So just had over Google and type and Roku. Tool belt, Right and scroll down here. And let's see, it's this one right here. It's dev center dot Roku dot com. So the full your L is deaf center dot Roku dot com slash articles slash Roku dash cli and CLI stands for a command line interface. I think, yeah, command line interface. So just scroll down and whatever operating system Iran, Windows, Mac or Lennox just download the installer for it. And we want probably the 62 or 64 bit installer, and we can save this anywhere. I'm just gonna save it to my desktop. And like I said, I'm on Firefox. So my downloads are up here in the top, right? If you're on chrome and they're gonna be down here in the bottom, left there on mackerel, a mix, it's gonna be a completely different thing. But you know, probably where your downloads are on macro Lennix. If you have a macro, Lennix. So go and click that and let's run this. And when we do this appears Make sure all these things air checked because we definitely want to add this to the path and then go ahead and click next, and then go ahead and click Install. And I'm not going to do this some to cancel out of here because I've already installed this . But once you dio, you'll need to restart your terminal. Right? So I've got the web server running here this entire get bashed terminal, come up here and exit out, close it and then restart it. Because I in order for this to take effect, you have to restart to get bashed terminal. And once you do, you can type in her Roku dash de sh dash version. And if it gives you any version number, you're good to go. It means it was installed correctly. If you get an error. Yeah, it wasn't installed correctly, and you need to go back and do it again. So I'm getting a warning here. There's an update available. It looks like I downloaded and installed this a while back and there's a new version. I don't care. I'm just gonna leave it. We don't care if it's the latest version you'll have downloaded and installed the latest version, so you're going to go. So that's all there is to installing the heroic Who Tool belt. Now, in order to actually make our app work on her Roku, there's quite a few little changes we need to make. They're all very easy, but it's gonna take us a video or maybe two in order to tweak our app. A lot of settings we have to put in there and stuff like that, so we'll start to look at that in the next video. 32. Install Modules For Heroku: Okay. So in order for our after actually work on Roku, we need to add a bunch of things we need to install a bunch of little modules behind the scene. And we need to make some setting dot pie file changes to our app. So that's we're going to start to do in this video. Probably take us a couple of videos to get through all this. That's not difficult. It's just a lot of stuff. So first things first, head over to your terminal, make sure you're in your master branch. You got your virtual environment turned on, and we need to pip install several things. So the first thing is Pip install gonna corns you an I C o. R. And it's like unicorn with a G in front of it. And that's a Web server. We've been using the sort of little development Web server up until now, but up in production on Roa posting, we need a row Web server. Gonna corn is a little Web server that will work nicely with Roku. So we use that the next we want to pip install something called Jingo. Underscore her Roku. And that's just a thing that does a bunch of things that heroic who wants are apt to dio takes care of it all for us. And it's added something called White Noise Deejay Database you, Earl, which we're gonna install again anyway, just to make sure psycho pg, which is post crest, that database. We're not really doing any database stuff in our app. But remember the very beginning of the course there was a database that we had to migrate for the Django admin area so that use a sequel light the database, which is not acceptable for her. Roku, that's a lightweight database. So even though we're not really using a database, we still have to designate, uh, hosts Crest as the database that we're gonna want to use and it's also installed. The Django Arocha thing is well right there. Okay, so there's a screen here. We're also going to hip install a python dash. Decouple. All right, so that did that. And I'm also gonna hip install deejay underscored database underscore. You are out now. It looks like that was already installed with the Django Hiroki thing. We just installed a second ago and it waas So we're going to go there so we can clear the screen. Now if we pip freeze, we can see, Yes, all of these things have been installed, which is exactly what we want. White noise deals with static files, CSS, JavaScript and image files. Um, we'll talk about that in a bit. So Okay, now we've We've got all these things, but see this pit freeze? This is a list of all the things that's installed on our app. Right? Well, we need to let her Roku know that all of these things exist. So we need to put all of this stuff in a little file that her oak who can look at to see all the things listed. It's a requirements file. So to create that we just go pip, freeze. And then the greater than sign. And then we just haven't requirements dot text I spell that right. Require, er men startext. Yes. And so now we can head back to our sublime text and we see down here, it's popped up, and it's just a list of all those things from the pit freeze that lists. You know, all the things we've got installed. So that tells her Roku all the things it needs to install on our behalf up on her. Roku. So Okay, now we need one more thing. We need something called approx file and approx file just tells her, Okay, what kind of app this is. So this is a web app, and, you know, we need to tell it that. So to do that, we need to create a product file, so to create when we just type touch and then capital p r o c f i l he and that will create it. Now we can head back over to sublime, and we see There it is right there, the Prock file. So if we open this, we need to add in here. We need to type web because this is a web app, and the web server we want to fire up is gonna corn done it. Corn. And then now we also need to Neymar app and art. App is called dental dot ws g I and the reason we know that was going to save this reason We know that is because that's this up here. This Ah, well, we could look at the ws g i and it says Dental. Right here. That's the name of our app. It's also the top level directory that we we created when we first ran our Django Start Project command way back in the beginning of the course. We called it dental, which is why it's called Dental appear in these two directories. So that's the name of our APP dental. So we need to put that in the prak file. So Okay, that's good. Make sure this is saved and we go and close that. Now this video is getting a little bit long. We've got to make a bunch of changes to our settings, that pie file to account for all the things we just installed. You know, the gun According the Django Roku thing. The python decouple the deejay database. You are l and all that stuff. We need to make a few changes in our setting. Stop. I fell. So I think we'll do that in the next video 33. Heroku Changes: Okay, so we've installed all these things, and now we need to address them in the settings that pie file when you make a few changes to the actual settings that pie file. So first things first, we need to import all of those things. So the 1st 1 was Jingo. Underscore her, Roku. Remember, we just pip installed that next we need to import deejay underscored database underscore. You are out. And then finally, we go from decouple like it's about right from the couple import can fig. Remember, we installed that python to couple. Okay, so save that. So those are the import settings that we need Now, we need to make a few more changes throughout this AP. So first things first come down to middleware and anywhere you want just at a new line. Don't forget your comma after it. And we just need to go white noise dot middleware dot capital, white capital, noise, capital, middleware. And that's that. Okay, so, uh, this is just creates a middleware thing that allows us to use the white noise thing that was installed with the Django Roku thing. We insult in the last video, and, like said that deals with static files, all of our JavaScript, CSS and images. So we've made that designation. But we also now also have to make another reference to it down here at the bottom. So let's just head down here and type and static files underscore storage equals, and this is gonna be a long one. It's white noise dot storage dot capital, compressed capital, capital, manifest capital, static capital files, capital storage. So compressed manifest static file storage. All right, so going to save that. And I might copy this and put this up here with our other static files stuff just to keep it all together. But you don't have Teoh finally come down to the very bottom again and go Jingo, underscore Roku dot settings. And then locals just like that so called the locals function inside of the settings function right? Save that. And that's pretty much it. Yes, that will do the trick. So our app is now ready to be pushed up to her, Roku. Now we just need to kind of log in to her Roku and push our app and see if it worked. Now, sometimes we'll get errors the first time we push it so we'll look at those if we get any. Hopefully we do get some errors so I can show you what happens when you get in there. It's not really uncommon to get an error when pushing to Harajuku. Uh, so we'll take a look at that in the next video. 34. Push Our Code To Heroku: Okay, so I assume you've created a Harajuku accounts, and now we're gonna push our code up to her Roku. But first, before we do that, we need to save all of these changes to get and push it to get hub. We definitely need to save it to get because what we pushed him. Roku is our get code. So if you haven't saved it to get none of these settings that we just changed will take effect. So let's go get add, period. We remember how to do this. Get commit Dash A m. And the message I'm gonna put, um, tweaked app for Roku. Okay, Now, then, get push to push all this to get hub. All right, so that's done. Now we need to log into her. Okay, So type in Roku, log in. And most heroic. Who commands Start with the word Hiroko. So log in. Now it's saying, press any key to open a web browser, so I'll do that. And we come to this page and it wants us to log. Answer. I'm gonna click log in and then type in your Roku log. An So now we're logged in. We can close this page or whatever. When we dio we come back to our terminal and we could see it. Look a we've been logged in. So now we hit control and see the control button in the sea but at the same time on our keyboard to break out of this. Okay, so we're now logged into Roku. Now we need to add our ssh keys. Rumor when we added our ssh keys to get hub several videos ago. We need to do the same thing for Roku. But with Hiroko is a lot easier. We can just type in her Roku Keys Colon ad, and it's looking into, say, we found your keys in that ssh directory that knows to look there. That's why we put it. Their idea underscore Arcee is this when you want to upload? Yes, enter and it's done. So now we can hit control C to break out of there for the screen again. Now we need to create an app on her Roku. So let's type in her Roku create. And here is the your l of our app. So it's hidden. Dash brush lands 83755 dot Roku app dot com. So we can copy this and head over to our Web browser and paste the sand and boom. This is the default screen. So if you don't like this, you Earl, you can change this, do anything you want. So I'm gonna go ahead and show you how to do that. You just have in her Roku rename and then the name that you want. So I'm gonna say, Dr J, uh, dentist. I don't know. So it looks like that worked. If it if that name has already been taken, you get a little error, and you just have to keep guessing names until one is not taken. So, like if you try to rename yours Dr J. Dentist, it won't work because I've taken that name right now. So now we can head back over to our thing and get rid of this crazy hidden brush lands part and change it with changes to Dr J. Kharazi. Dr. J Dentist. What I call it after j dentist, yet looks like it. Okay, Dr. J. Dentist. Yep. All right, so now is the moment of truth. Now, can we push our code? Will we get an air so to push Arco, We just type in. Get push! Roku Master. And what are we doing? We're pushing our master branch of our git repository. Remember, Get version control to Roku. Go ahead and do this now. This contagion five minutes. It could take 10 minutes. It could take 30 seconds. It just sort of depends. And so we can look through here and kind of watch is very exciting, because you never know if it's gonna work or not. There's a lot of times when I've made errors in my Roku settings that we just did in the last video. One time I called gun accord gonna cord. Right? So in the Prak file, I typed gun accord. Well, that through an error. And it it didn't allow, I think, to be pushed up to Roku. So you never know. It's always exciting. So now we kind of sit here and watch, and you can see it's installing the things. Here's all of our stuff from our Pip freeze and all right, we got an error. So push rejected. Let's see what happened. We're getting a CSS thing. This is very common. So there's a problem with our static files. Remember, that white noise thing handles the static files. This almost always happens when I push stroke Django APS to her. Roku. So all you have to do, is it read through here? And it usually tells you what you need to do. So what we can do is just copy this. Here's the command. It says we should. We should do this, command. So I'm gonna copy this and come down here and paste it. So it's her Roku config set disabled, collects static. And we do that. It restarts its thing. And boom, we're done. So now, hopefully that's all it takes for after work. And when you get an air like this, Look, this is a lot of gobbledygook. I understand This is hard toe to read, right? But just kind of always look towards the end and you could see towards the end it starts looking more like English, right? And just read this so you know it. It's telling us exactly, you know, it's having a problem for some reason. With this this ah, image. Right. So because of that, we need to do this, collect static command. So it almost always tells you what you need to dio if it doesn't tell you exactly what to do, find something that seems like English and copy it some sort of error, things like right here. If you didn't tell me what to do, I would see this and I would say air while running Python. Magical, Ecstatic. I would highlight all of this. Copy it and then just google it and you're almost always gonna find a stack overflow article that shows you what? What the problem is. So anyway, enough on errors. Let's push this again. So get push, Roku, Master, Hopefully this time around, it will work. I suspect it will. So it's compressing the files is building the source. It's Hey, it's figured out. This is Python, right? So it's installing Python installing Pip. Now it's installing the sequel like three database, even though we're not going to be using it because we changed our settings dot pie file to use psycho PG e J underscore database. You are all thing. All right, so it's going through its things downloading all the files we need And you could see Remember when we created our pit freeze file our requirements, not text file. We told it what things are in our app. Well, now it's installing all of those things, right? So that's cool. Compressing Ah Prock file. It's discovered or product file. It's realized. Hey, this is a Web app that school of compressing launching Oh, look, that's 53.7 megabytes pre big released. So here's our Your URL is deployed and now we're just waiting for a final confirmation Done . A verifying deploy boom. Looks like we're done. So now a moment of truth. We can really come back here to our Dr J dentist dot Hiroko up dot com. We can hit reload. And it worked. Very cool. Now this is live and online. Would go to this contact page. It works. Here's our Chicago map. There's our form. Everything is working. Could go back. Awesome. Now, Like I said, this is live online. You can tell your friends about it. They can come Look at it. It will be slow because it's the free tier. But this is totally live, and we're basically done, right? So one more thing I do want to talk about is this u R l right. This is not what your dentist wants to see. He wants Dr J. Dentist dot com or whatever. Right. So I'm sure you in the next video how to set all that up and, uh, yeah, that'll be in the next video. 35. Add A Domain Name: Okay, so we've cut our website. It's alive. It's online. And we've got this very fancy your l dr j. Dentist dot Roku app dot com and okay, great. This is not a good girl, right? So your dentist is obviously gonna want their own domain name. So in this video, we're gonna show you how to do that. So if you're not familiar with domain names, they come from something called a registrar, a domain name registrar, and there are just tons of them out there. You probably hurt. Go, Daddy. That's a popular one name. Cheap is the one I like. Google has their own domain registrar that you can use, and they're all pretty much the same, right? You can get a domain name for around $10. Maybe Sometimes the go daddy has it for $7 or $8 maybe this one has it for $6 or, you know, some sale. But generally speaking, you're gonna spend about 10 bucks a year, and that's what they are. They're yearly, so you don't you own them, but you really just rent them and you have to pay yearly for them. So I like name cheap. I suggest you use them. I'm going to show you how to use name cheap to set up a domain name. But really any registrar use is fine. It really doesn't matter. So first things first. We need to set this up. It's a two step process. What we're doing here, we have to make a change on her Roku. And then we have to make a change at our registrar, which everyone will use. So let's do Roku first. So just head over to Roku dot com. And I think we're probably already logged in cause we've been dealing with it here. And when you log in, you'll see all of your APS. Now, you probably only have one app. I have three pages of them cause I use Hiroko a lot and just come down and find your app. Now, ours is Dr J Dentist, so we can see it right here and just click on it and then head up here to the top and click on settings and then scroll down to see ad domain. So go ahead and add domain. Now, let's see. Um, right here you add the domain, so I want www dot Whatever your domain name is, and the one I'm going to use is just, I think elder test site dot com. So, you know, if you own Dr J dentist dot com, you would type that in there? Be sure and put the www dot on it to begin with. So Okay, click. Next. So All right. Congratulations has been added. Okay, so I think you do have to put a credit card on file in order to do this. But again, they're not going to charge you for this. This is completely free. All right, so now we can go to this website, and there's not gonna be anything there yet, so just hit and in that. So Okay, so that's all we have to do for her. Roku. It's very simple. Now we need to go to our registrar. So, like I said, I like named chief, So I'm gonna head over the name sheep and I'm already long dance. I could go to my dashboard and find that domain. So elder test site. That's the one we want to use at whatever your domain name that you want to use is use that . And here's a nice thing. If you're doing this and you're charging a dentist, you might register their domain name for them and charge them for that. It cost $10 a year. You might charge them $20 a year, whatever, Justin. Idea. So when you when you see the domain that you want to use, come over here and click on Manage. Now, before we get into this, I'll say this will be different for every register. This is what name Chief looks like. If you use go, Daddy, it looks completely different. If you use Google domains, it looks completely different. So you may be able to just figure it out just by watching this, or you may have to google it. So if you use go, Daddy, you can just go to Google and type in like Go Daddy Roku domain or her Roku Go, Daddy domain and you'll see a tutorial. Little pop right up that will tell you exactly how to do it. But like I said, I, like name cheap. They're very cheap. I think I paid $7 something $8 with tax for this domain name for a year, so I use it for Ah, you know, testing purposes to teach you guys how to do this stuff. So once you've clicked on manage, come up here to advance DNS. And it's almost it's probably gonna be in an advanced tab wherever you're at whatever registrar you're using if you're using go, Daddy, I'm sure they haven't advanced DNS tab somewhere. Find it and click on it. And then we want to come down here and there's a C name already there, so I'm gonna get rid of that. Um, I don't I don't want that. Now, we we need to add a new record. So click that and it's gonna be a C name. So click see name. And here it is. It's over the host. We want www. And for the target, we want a pay stand. Our Roku u R l So remember we we changed this Teoh Dr J, dentist dot Roku app dot com, and then you want to put a period at the end of it. I don't know why. Which you just always have to put a period at the end of these things. So if you didn't change the name of your heroic UAP and It's still, you know, bushy swallows dot 5697 dot Hiroko up dot com or whatever you would put that they're right . Next. Come over, automatic and I I always change this toe one minute. This is how often this updates. So we want this to update right away. So I just put it as one minute. Ah, And then all we have to do now is click save change, and that's all there is to it. So now we should be able to go to this this website, older test site and hit Reload. Now, if we do, probably nothing will happen just yet. Yeah, it still showing just the name cheap because it takes a little while for these changes to propagate around the entire Internet because the Internet is made up of name servers and there's one over here and there's one over here and there's one over here in Sweden and there's one over here in Japan, and there's some in America, and so when we make a change, it one it takes a while to propagate out to all those other name servers so it could take an hour. They say it could take up to 12 hours in order for you to actually see this website go live . So don't worry. If you don't see it right away, you can restart your computer. Sometimes that helps. You can go to your windows start menu and type in CMD and you can't see this on screen. But, uh, the command prompt pops up. That's just C m d. That's what I typed into the Windows Start menu. And when you get here, you can go I p config Um let's see. And then it's flush D n s, I think No, try again. I peek and fig four slash flush D N s. Yes. So I p config forward slash flush DNs and DNS stands for a domain name, service or server. So we're flushing our domain name server cash. And this will tell our computer to recheck the global domain servers. And when we re check, hopefully we'll see that it's been updated to elder test site. Uh, so we'll see if we can hit Enter. It's still not going. So, Like I said, restart your computer, Wait 20 minutes, wait half an hour, restart your computer again and usually you'll be able to see it, but that's all there is to it. It should now work from now on. And so when it does, instead of going to Dr J. Dentist dot Roku app dot com, we would just go to elder test site dot com and, ah, that should work. So really, that's all there is to it. And now we have our APP live. It's online. And, uh, we've got our domain name and we can now sell this to the dentist. Or, you know, if you've been working with a dentist, you're done. You can hand it on over to him, say, here it's done. If you're charging them for Web hosting, you can set that all up however you want, and a very cool. So So I think that's all for this video. In the next video, we'll say a few words and wrap this up