Class
Projects
Sponsors
Setting up our site in Dreamweaver
To start let's setup our site in Dreamweaver. Because our code can only be tested on a server, you will need to have a web server or XAMPP setup on your computer to test this. Once it is we can easily have Dreamweaver copy our files over for us using the following steps:
PHP / MySQL Chatroom Part 1/5 - Setting Up Our Database Using phpMyAdmin
Jun 27, 2010 6:39 amphpMyAdmin is a program written in PHP that allows us to perform basic tasks to our database simply and easily. It is important to note that phpMyAdmin is NOT our database, but instead a tool to view and manage it.
If you are working in xampp, phpMyAdmin is already installed and you can access it from http://localhost/phpmyadmin from your web browser. If you have your own server online, your hosting company may have already set it up and sent you access to it. If not, you can install it from the documentation at http://www.phpmyadmin.net.
The syntax of PHP is very similar to that of Javascript. The difference is use, we use PHP for any backend functionality for our website: sending email, adding customers to a database, logging in to our website...
You want to be sure that the file you are writing this php code in is named .php ie: index.php, php code will not work in an .html file. You can however, have html code inside a php file. PHP also needs to run on a web server. So testing out your PHP file from your normal working folder will not work. You can test out your php code by either uploading it to a webserver or using a program like XAMPP to simulate a webserver on your own computer
PHP
What is php?
PHP is a scripting language that is generally used to combine front end technologies like HTML and CSS to backend technologies such as a MySQL database. PHP can be used to send email from a form, generate dynamic downloadable files, and retrieve system and network data from users on your website. PHP is a very powerful tool with a lot of online support.
What do I need to use php?
New design for the store, so a few new products. Click here to go to sciencemerch.com
A very popular use for JavaScript is its ability to check input data from forms before we send it to the server to be processed (added to a database, email, etc.)
What we will be doing is creating a simple HTML/CSS contact form, getting very basic information about the user. Use the code below in your body tags to create the html part of our form:
To start this example, download the following html document: http://jeffkilroy.com/hosted/Class/AdvancedWeb/Misc/javascript_3_start.html (You can right click the link and go to File>Save As)
You can see in this file we have our HTML and CSS already completed, in our HTML we list out 4 different divs that each have a similar id name: box_productinfo, box_news, box_images, box_buy. We will think of each of these divs as pages, what we want to happen is whenever we click a button in the navigation, it only shows the appropiate div.
One of the nice uses of javascript is that it can change some of the styles on our page. In this example we are going to use certain events such as the page loading or clicking a button modify some of the styles that are used on our page. Let's start with our HTML, add this code to a new html file inside the <body> tags:
<div id="mycontainer">
<p>Hello</p>
</div>
So all that we have here is a basic div containing some paragraph text. The container div has an id called "mycontainer" so we can easily target it. Simple right? Now let's take a look at some javascript, first in the <head>, be sure to make your opening and closing script tags somewhere:
Up next, Javascript! We use Javascript for client side programming. It is a great way to make our webpages more interactive by dynamicly changing content and styles, as well as verifying input data such as forms. We can even combine javascript with PHP and XML to interact with the server and fetch database information (AJAX). Before we can do any of that, we need to be able to understand the syntax of how Javascript is written.
First, javascript must always be in <script> tags in our HTML, just like how we setup our <style> tags. Also like styles, this will go in the head of your document. So create a new html file, and add this into the <head> of your document.
HTML/CSS forms can be a bit scary at first. Let's take a look at a simple HTML form and break it down, tag by tag:
So far we've been able to setup our layout and create a page, but what if we need more than one page? All of these links on our page can't just link to nothing right?
This is pretty simple, but first we want to use our index.html file as a template for the rest of our pages so make sure that page is complete. You want your stylesheet connected and all of your navigation links going to the correct spot. So if you have a link for "Contact Us" you can make that link go to "contact.html" (even though it doesn't exist yet, we will create it in a second.) Once all your links are written and your page is complete, you are ready to use this page as a template for the other pages.
So up to this point we have been working in Dreamweaver's code view to manage our HTML and CSS even though there are a few things Dreamweaver could have done to make it easier for us. The reason we went through the code first is because if something goes wrong, you need to be able to go back into your code to debug any issues.
What we will most often do is work in Dreamweaver's split screen mode, use some functionality offered by Dreamweaver when we can, and when it will be more efficient we can write the code ourselves. So let's take a look at some of the things Dreamweaver can do for us. This may vary depending on your version of Dreamweaver:
Big Bang Theory (Bazinga) Shirt Added To ScienceMerch.com
May 10, 2010 4:08 amNew "Bazinga" shirt. Click here to go to sciencemerch.com
Up to this point we have been embedding all of our style code into our HTML document. Because you will usually be working with multiple HTML documents for each of your website pages, this is not the way to go.
The main reason we are using CSS is to ensure any changes we make can be done easily right? Well that won’t work if we need to go into every page of our website and change the style one by one. So let’s look at creating a website using an external style sheet. (Note: Once you have gone through these steps, feel free to go back to your previous websites and move the styles in your HTML document to their own file).
Using the techniques from Putting Together Our First Webpage and Working With and Clearing Floats, let’s put together a site with a left and top navigation.
You can download the files for this lesson here
So looking at the files/layout.psd file, we can see that we will have a few buttons horizontal across the top, and a few on the left side. Both navigations have rollover states, giving an indicator of the user’s mouse being over each button. Let’s take a look at the structure of our html to make this page work:
Often in the content of your website you will want an image beside your text, allowing the text to wrap around. Or perhaps you may want to add a second or third column to your website. This is the job for the CSS float property.
The float property tells whatever element you apply it on to float to a specific side (left or right). Whatever content is left after the specified element will then wrap around. So in my HTML code if I have paragraph tags above my image, paragraph tags below my image, and then tell the image to float left, only the paragraphs below the image will be affected and flow around the image.
I am currently working on re-scripting the Nakid Content Management System after noticing a few issues with the file path structure when working with Nakid on a local machine. This update should patch almost all of these issues and make Nakid cleaner and faster.
Anyone interested in working on the Nakid project in any way (artwork, programming, writing...) feel free to contact me
By default, certain elements have certain display methods, all of these however we can override with CSS. The main three are:
Block: Examples of default block elements include <div>, <p>, <h1-5>. When a block level element is written, by default it will take up a certain amount of extra space, it may also have default margin and padding applied to it. It will move any following content to the next line.
Inline: Examples of inline elements include <span>, <a>, or <strong>. These will not move the following content and are usually used to apply an effect or function to content.
Let’s start by making sure we have all the files needed and have our documents ready. If you don’t already have a folder setup to store all the websites you will be creating, create a new folder called ‘websites’. Then inside this you will have a folder for each website you make.
If you don’t have the files for the Ubuntu page we will be making, you can download them here:
http://jeffkilroy.com/hosted/Class/AdvancedWeb/Ubuntu/download.zip
Darwin 'I think...' Tree of Life Shirts Added To ScienceMerch.com
Apr 15, 2010 12:41 pmNew "Darwin I Think..." shirt. Click here to go to sciencemerch.com
