In this tutorial I will teach you how using Dreamweaver you can create a news system for your site.
Part1: What do I need to get started?
Since I am doing this locally on my machine For this to work you will need to have the software below installed. Also if you want to apply this to your live web site, your hosting company need to run PHP MYSQL
- WAMP5 : http://www.wampserver.com/en/index.php
- EMS SQL Manager for MySQL (WAMP5 comes with a sql manager, you can use it, or which ever one you are familiar with.
Download and install both software, if you installed wamp5, by default it would create a folder located in C:\wamp\www\, create two more folders inside the www\ directory called localroot and the other webroot.
Part2: Creating the database and tables.
Start up EMS and click on the create new database icon.
Create a new database with the name, news_db and click next, and you will see the window below.
Click next and Finish. When you do that you should see the Registration database window. Just click ok. We need to create the user to access the database click on the User Manager Icon . Change the Servers to Localhost and click ok. At this point click on the Add User Icon when you do that you will see the window below.
This is just a demonstration, so your username and password will be different. Make sure to select All Privileges and With Grant option. With that click ok to apply the settings.
When you do that you will connect to the database where you will be able to see the tables.
With that click on the Create new table icon shown below.
With that it should send you into the Table Properties window. Click on the Fields tab.
Double click on the Column Name and change the information according to the image below. When you are finish click ok.
We need to create 3 more fields, Double click on the Column Name and fill in the information below.
At this point your Table Fields should look like the image below.
Click on to Insert Record. Fill in the information you want to be displayed in your news system. After each data entry make sure to click on Post Edit
This is how your table should look, with the data entered.
Well we are finished with the database part.
Part3: Setting up Dreamweaver and creating the form.
Start up Dreamweaver and click New Site> Manage Sites..
and click New> Site. Click on the Advanced Tab and you will see the window below. Click on Local Info and fill in the information shown.
When you are finished click ok, Done
Create a new php page and name it news.php
We will need to create the news form layout. This is how the content will be displayed. You can be very creative here and design this any way you want. For this example i provided the table code below. Copy this and paste it into DW code view.
<table width=”147″ border=”0″ cellspacing=”2″ cellpadding=”2″>
<td width=”139″ height=”222″ align=”center” valign=”top”><table width=”200″ border=”0″ cellspacing=”2″ cellpadding=”2″>
<td align=”left” valign=”middle” bgcolor=”#666666″> </td>
<td align=”right” valign=”middle” bgcolor=”#666666″> </td>
<td height=”172″ colspan=”2″ align=”left” valign=”top”> </td>
<td colspan=”2″> </td>
Part4: Creating the news page, and connecting to the database
With that the window below will come up. Fill in the information shown below.
This information has to match up with what you created using EMS
Next click on Select, select the news_db database and click ok twice.
At this point you will organize how you want to search result to be displayed. Click onBindings and create a new Recordset by clicking on the. Create the Recordset according to the image.
Click on the (+) next Recordset, you will see the fields shown above.
You should have the table shown below.
Now just drag the names over to the table from the recordset.
Click on the table and select the table code shown below.
When you click on the table tag it will select your table. With the table selected click on Server behavior located in the Application window. From there click on the and select Repeat Region
This is where you will list the amount of news updates you want to be listed. If you selected 5 only the first 5 news events will be listed.
Well that is it, hope it came out to what you expected. If you have any question or comment about this tutorial, feel free to post a message