Part 1 – Bitnami, NetBeans, FileZilla and Web Developer
This is Part 1 of How to Use Bitnami and NetBeans to Create a Local Development Site and in this session we discuss what the relationship is between Bitnami, NetBeans, FileZilla and Web Developer and what these component parts are used for in developing a website.
Rick: Okay so the next question we’re going to answer is Angie’s. Angie asks about the relationship between Bitnami, NetBeans, Web Developer, and FileZilla and wonders if I could demonstrate them all together. Angie, I’m unmuting your microphone here for a second.
Angie: Okay Rick, thank you.
Rick: Yeah, thank you.
Angie: I’ve watched your videos and I think I understand it but there’s still a little bit of confusion in my mind. So if you could demo that, that would be great.
Rick: Okay no problem. I’m going to mute your microphone here for a moment but if in the middle of my conversation here, you want to ask a question, just raise your hand, okay?
Rick: Okay so before we start on that, what we need to talk about is what each of those component parts are used for. You’ve got Bitnami, NetBeans, FileZilla, and Web Developer and they can all be used together. And so… but what would you use them for? And Bitnami is an easy way for you to create a local version of WordPress. And by local version I mean a version that runs on your computer does not run out there on the web. It’s not accessible by the web. It’s only accessible on your computer. That’s a local version.
Netbeans either serves as smart code editor or as an integrated development environment or IDE. And as an integrated development environment, it can connect with your Bitnami server and your local WordPress site and can convert that to a project. And once it’s a project, it’s a very smart piece of software that you can use to find things you want to find or easily change names across the whole project, things like that.
FileZilla is a tool for communicating with your remote website or with a website that’s online and in particular, what you do is you’d use it to upload files from your local computer, from your hard drive and upload those to the website. In the context of Bitnami and NetBeans, you would use FileZilla to upload the files from your Bitnami local WordPress site to your live WordPress site.
And then finally, Web Developer is really pretty much completely separate from those and the Web Developer is used for rapid prototyping. It’s also used for other things but in this context, it’s used for rapid prototyping so that you can test in particular, CSS. You can test CSS before you put it on a real page. And so, I’m going to show you 2 examples of how you can use these together.
I use these tools in exactly this way. The first way is sort of the simple version and that is as a local project. The purpose for having a local project is really just for quick testing of software, quick testing of programming. You know, I don’t use it generally for developing a typical site because I don’t… you know, I can develop comfortably on a live site. But if I’m doing some complicated bit of programming or if I feel like I need to test over and over and over again in order to get something accomplished then I’ll create a local WordPress installation and use it as a project and do it locally first. So I’m going to show you how to do that with Bitnami first.
Now this is a Bitnami installation I created this morning and the host is 192.168.1.107 with a port of 81 and a name of WordPress. This designation of the location of this website, local location of this website, is unique to Bitnami if you’re using something like Wamp or Zamp or any of the other Windows-based Apache servers. The chances are, in the place of this, they’ll say local host. But in this case, this is a Bitnami one and so uses this as its address. And right now, this isn’t connected to anything. It’s just a plain, old ordinary local Bitnami installation.
But then if I go open up NetBeans, I can come here, create a new project and I’m going to create a new project that is a PHP project with an application with existing sources. That’s this one right here. So I hit next and now I have to find the sources folder. So I have to go find where NetBeans, I’m sorry, where Bitnami is holding them. And so I think that is probably under local disk and then you know, it’s probably under My Documents then under Bitnami NetBeans projects. Let’s see, let’s go back to this again. Local Disk C, it must be under Program Files. Okay, Bitnami WordPress stack, I think it’s probably this one, yeah that’s right… Bitnami WordPress stack and then we’ll go down to… I think it’s under Apps and then WordPress and then htdocs and that’s where it is. So this is the folder that has this WordPress installation in it. In this case, it’s Program Files, Bitnami WordPress stack, Apps, WordPress and then htdocs.
So we open up that and then let’s see, it says the sources folder is not writable. I’d forgotten about this. In Bitnami, what I have to do is I’d have to make this sources folder writable. Now you know, I do have a set of videos on how to create a local installation and to make this into a project. So I’m not going to take this part of it any further. I’m just going to pretend that we were successful with this because this is a bunch of little steps you have to do in order to make this work but we have that covered in other videos. So we’re just going to pretend that we’ve accomplished that and I’m going to work with another project that I’ve already created.
So hit cancel on that and the project I’m going to work on here is the one I use for developing my plugins. It’s called Test Bed and it’s this one right here. Now, each one of these things is a project, is a NetBeansproject. BYOB Website is my real website. Categories is that categories.byobtutorial.com. Dummy project is nothing. Golf is a client site that I’m working on. Law Office is a client site I’m working on. Live Answers, I don’t actually remember what that is. It must just be a…oh yeah, this is the one I created for the Live Answers. Stanfield is a client’s project I’m working and Test Bed is this one example of a real simple one that just exists locally. And if you open it up, you can see it looks very much like a regular old WordPress installation with wp admin, wp content, wp includes.
Now the thing is that since this is a project, I can go over here to index php, select it, right click and say run and the project will open in a browser. And this is the project that I’ve been playing around with and you can see that it says http://localhost.testbed. And I can operate this just like any WordPress website, right? So I can go ahead and say wp admin, log in to it, and then I can for example, install plugins. I think one of my plugins is not installed here. Let’s see, header widgets, nav menu, sub sidebars… so let’s see. If we go to installed plugins, I can, for example, I can activate the Thesis landing page plugin. If I activate that plugin you know, now those plugins are all installed. So I can do all kinds of stuff on this as if it were a regular website.
And so what I do for example then is if I’m working in this and let’s see, let’s just make a change in one of these plugin files. So let’s see, BYOB Thesis header widgets, we’ll make a change in this one. So I just opened up that file here and you can see that since it’s a project, I can open up the file for me inside of this section. And we’ll just come down to one of these things and let’s see, what am I going to change? I’m just going to change the description here just for grins.
“Hello everyone.” Okay if I save this and come back over to the site and refresh this plugins screen, you can see that it now says, “Hello everyone” down here, right? So this is a way of editing quickly and seeing the results of that editing very quickly on a local site. That’s the simple version.
Now you can use Web Developer on this as well, right? So if I was wanting to work on CSS, I can easily come back over here to this and I can open up this site in Web Developer, just paste that URL here and edit CSS, custom CSS. And let’s say I wanted to change this stuff right here. Let’s see, inspect the element, element style, right? I could change this to red, for example, and so I can still use you know, Web Developer and Firebug in conjunction with this. But all that does is change how I see it. If we look at it in Chrome, of course, you’re not going to see this color change because it’s not a real color change. It’s not a… well let’s see, let’s just look at it in Internet Explorer. It’s not a real color change because we’re not really changing the file. We’re just changing how Firefox displays the file either through custom CSS or through Firebug, whichever way we choose to do it.
So that’s how those work together in just a local installation.