SECTION: 1
Creating a simple newsletter signup using PHP and MySQL
53:14
1:16
1:09
Downloading and Setting Up Your Local Web Development Environment
SECTION: 1
Creating a simple newsletter signup using PHP and MySQL
53:14
1:16
1:09
Questions
David P
3 years ago
0
You are not following this thread
0
You are not following this thread
0
You are not following this thread
0
You are not following this thread
0
You are not following this thread
0
You are not following this thread
Muhammad S
5 years ago
3
You are not following this thread
Muhammad S
5 years ago
0
You are not following this thread
Muhammad S
5 years ago
0
You are not following this thread
Muhammad S
5 years ago
0
You are not following this thread
Student Gallery
Be the first to share something.
Course info
Overview
Hi, In this course we are going to add a newsletter sign up form that will save our new subscribers to a database.
To do this we are going to be using a backend programming language called PHP and a MySQL database.Don’t worry if that doesn’t make any sense to you, we will be going over all of the basics and walking you through it step by step.
This course does however assume you have a basic understanding of html and css, and that you know how to push any updates up to a server and make them live.
If you don’t have that experience then I can recommend this course by Daniel Scott, it starts at the very beginning and will easy get you up to speed so you can start taking the next steps like working with PHP and databases.
So if you’re ready to get started with our PHP database project … then sign up to the course and lets get started :)
Daniel Scott
Founder of Bring Your Own Laptop & Chief Instructor
I discovered the world of design as an art student when I stumbled upon a lab full of green & blue iMac G3’s. My initial curiosity around using the computer to create ‘art’ developed into a full-blown passion, eventually leading me to become a digital designer and founder of Bring Your Own Laptop.
Sharing and teaching are a huge part of who I am. As a certified Adobe instructor, I've had the honor of winning multiple Adobe teaching awards at their annual MAX conference. I see Bring Your Own Laptop as the supportive community I wished for when I was first starting out and intimidated by design. Through teaching, I hope to bring others along for the ride and empower my students to bring their stories, labors of love, and art into the world.
True to my Kiwi roots, I've lived in many places, and currently, I reside in Ireland with my wife and kids.
Downloads & Exercise files
Transcript
In this video we are gonna download and install vs code. We're also gonna download and install X amp. We are gonna spend a little bit of time configuring X amp and we're also gonna talk about why we need it in the first place and the differences between front end and backend code. Okay, so if you haven't already, you'll need to download and install each of these apps. I've done this already while planning out the course. If you have any problems, feel free to leave a comment and I can help out.
So for Chrome, we've just got a, uh, download button here for VS code. Um, there's two download buttons, one up here, one here. There's also a dropdown. So you can choose, um, choose what operating system you're using and pretty much the same with X Amp or Z. I'm not too sure which one of those is correct, but we have downloads for each of the operating systems that you might be running. So once you've got those downloaded and installed, let's go ahead and open them up for VS code, you're just gonna see a welcome screen.
That's okay, just leave it here. I'm not going to install any packages or update any settings. Actually, the only setting that I've updated is the font size. I've just bumped it up to 16 to make the tutorial a little bit easier to read. And if we open up X amp, we'll see, um, this little screen here to manage your server. So the first thing that um, we want to do is hit the start button and we'll just give that a few seconds for it to do its thing in the background.
It's probably installing your virtual machine. Okay, so once it's finished, you're gonna see an IP address here. Go over to services. And we want to start each of these up. Go over to the network tab. Let's just enable the, um, local host 80 80.
And when we go to volumes, we want to click the mount button. Once we click that mount button, if we come over to Finder, what that's gonna do is add this IP address, which we saw on the general tab, and this is gonna be the file system for your server. And out of all of these, the only folder that you are really interested in is the HT docs. And this is where we are gonna put all of our Projects and websites. Now that we've got our server up and running, let's talk about why we actually need a server in the first place. So if you go to your exercise files and you'll see a server example, and what we're gonna do is just grab that and drag it onto our VS code.
And that should open those files up for us. And let's have a quick look at each one. So let's have a look at the front end example first. This isn't very exciting. It's just a, a basic HGML page. Just got a quick style in here just so we can see that working.
And also just a little snippet of JavaScript two, if we go back to Finder, and if you click on the front end example file and right click, you can go open with Google Chrome and we can see that Google Chrome can open the file, read it, and return the H TM L and it, and it works. We get some red text and we get a button that we can click and it and does some stuff. That's the JavaScript snippet. If we have a look at the backend example, we can see that this is using some PHP and there's a little snippet up there, and then it's outputting each of those in place of the heading and the paragraph text. We also have the same style and snippet of JavaScript, but if we go back to Finder and do the same thing, we can see that, first of all, it doesn't even give us an option to open it with the browser, but if we just change frontend example to backend example PP and try to run that, we can see that all the browser's doing is just reading the file and returning the text. It doesn't know what to do with these PHP snippets.
It, it breaks it and it, it doesn't return a webpage. So if we grab our same server examples and copy those over to the HT docs file in our X amp server, and if you can't find that, just remember that you click on the IP address lamp HT docs. And what I've done is just added a little, um, folder here for, for any projects and examples. So if you just copy that over to projects and go back to our exam. And if we go, actually let's just go to Chrome and go to local host 80 80, and that's gonna take us to The, to the dashboard for exam. And if we go to projects, which is the folder that we created before, and we can see our server example, and if we go to, let's check out the front end example first and we can see that that works as expected.
If we go back and also go to our backend example. So this is also running now is because Amp is, is reading the PHP and actually returning it in a format that the browser can understand and display.
So for Chrome, we've just got a, uh, download button here for VS code. Um, there's two download buttons, one up here, one here. There's also a dropdown. So you can choose, um, choose what operating system you're using and pretty much the same with X Amp or Z. I'm not too sure which one of those is correct, but we have downloads for each of the operating systems that you might be running. So once you've got those downloaded and installed, let's go ahead and open them up for VS code, you're just gonna see a welcome screen.
That's okay, just leave it here. I'm not going to install any packages or update any settings. Actually, the only setting that I've updated is the font size. I've just bumped it up to 16 to make the tutorial a little bit easier to read. And if we open up X amp, we'll see, um, this little screen here to manage your server. So the first thing that um, we want to do is hit the start button and we'll just give that a few seconds for it to do its thing in the background.
It's probably installing your virtual machine. Okay, so once it's finished, you're gonna see an IP address here. Go over to services. And we want to start each of these up. Go over to the network tab. Let's just enable the, um, local host 80 80.
And when we go to volumes, we want to click the mount button. Once we click that mount button, if we come over to Finder, what that's gonna do is add this IP address, which we saw on the general tab, and this is gonna be the file system for your server. And out of all of these, the only folder that you are really interested in is the HT docs. And this is where we are gonna put all of our Projects and websites. Now that we've got our server up and running, let's talk about why we actually need a server in the first place. So if you go to your exercise files and you'll see a server example, and what we're gonna do is just grab that and drag it onto our VS code.
And that should open those files up for us. And let's have a quick look at each one. So let's have a look at the front end example first. This isn't very exciting. It's just a, a basic HGML page. Just got a quick style in here just so we can see that working.
And also just a little snippet of JavaScript two, if we go back to Finder, and if you click on the front end example file and right click, you can go open with Google Chrome and we can see that Google Chrome can open the file, read it, and return the H TM L and it, and it works. We get some red text and we get a button that we can click and it and does some stuff. That's the JavaScript snippet. If we have a look at the backend example, we can see that this is using some PHP and there's a little snippet up there, and then it's outputting each of those in place of the heading and the paragraph text. We also have the same style and snippet of JavaScript, but if we go back to Finder and do the same thing, we can see that, first of all, it doesn't even give us an option to open it with the browser, but if we just change frontend example to backend example PP and try to run that, we can see that all the browser's doing is just reading the file and returning the text. It doesn't know what to do with these PHP snippets.
It, it breaks it and it, it doesn't return a webpage. So if we grab our same server examples and copy those over to the HT docs file in our X amp server, and if you can't find that, just remember that you click on the IP address lamp HT docs. And what I've done is just added a little, um, folder here for, for any projects and examples. So if you just copy that over to projects and go back to our exam. And if we go, actually let's just go to Chrome and go to local host 80 80, and that's gonna take us to The, to the dashboard for exam. And if we go to projects, which is the folder that we created before, and we can see our server example, and if we go to, let's check out the front end example first and we can see that that works as expected.
If we go back and also go to our backend example. So this is also running now is because Amp is, is reading the PHP and actually returning it in a format that the browser can understand and display.
