Category Archives: Web Design Technologies

Posts for LIS 4365 Web Design Technologies

Module 9 – Connection to MySQL and PHP for Web Programming Group

The assignment for web programming for this module was to make two connections from PHP to MySQL.

The web page I created for the assignment is here, containing links to pages for the first and second connections:

http://jered.0fees.us/module9/index.php

Connection 1

For the first connection, just pasting the code into a page and loading it naturally failed. After that I fixed a bad quote and added the closing “?>”, to get:

<?php
$db = mysql_connect("sql211.0fees.us","username","password");
if (!$db) {
	die("Database connection failed miserably: " . mysql_error());
}
?>

I replaced the MySQL server, username, and password in the code with the login information for my 0fees account.

After that, the page was blank when it loaded (because it didn’t throw an error). I added a sentence in HTML to the page just so I’d know for certain that the page had loaded.

That was pretty straightforward. I just needed to get my MySQL login information from the 0fees cPanel.

Connection 2

I had to tweak the first quotation mark in this code too, as well as set information like the login information and database info. I tried loading the page before creating the database and saw the expected error, with a notice about a failure to connect to the database. Then I made the database and no table, and got the third error in the PHP code, also as expected. Then I created the table and added some data, and the PHP code ran with no error messages (or output, so I added a line of text to the second page too). The code I used was (with my username and password removed):

<?php

//Step1

$db = mysql_connect("sql211.0fees.us","username","password");
if (!$db) {
	die("Database connection failed miserably: " . mysql_error());
}

//Step2

$db_select = mysql_select_db("username_module9",$db);
if (!$db_select) {
	die("Database selection also failed miserably: " . mysql_error());
}
?>
<html>
	<head>
		<title>Step 3</title>
	</head>
	<body>
		<?php

		//Step3

		$result = mysql_query("SELECT * FROM testdata", $db);
		if (!$result) {
		 die("Database query failed: " . mysql_error());
		}
		?>
		<p>If there were any errors, they will appear above this sentence.</p>
 </body>
</html>

The code ran fine, and I didn’t have any problems connecting to the database or creating data through PHPMyAdmin. The instructions in the slides for working with cPanel and PHPMyAdmin worked well.

Posted in Web Design Technologies | Comments Off

Module 9 – Web Design for Design Group

The assignment this week was to develop a blueprint for the website that my partner and I will create for the semester project. The assignment title suggested that the member of the team who will be primarily responsible for web design should create the blueprint. I will be primarily responsible for the web programming side.

The blueprint from my partner, Christian Williams, is reproduced below.

1. The websites objective is to sell vegetables and include nutritional information.

2. The audience is the consumers who would like to purchase vegetables.

3. The content of the site is a shopping area that displays vegetables and nutritional information. As well as information about the local farm.

4. The site will provide form functionality and a shopping cart.

5. Design elements are not finalized as of yet but as far as navigation the site will be very minimalistic and clear. It will offer a very clean user interface to buy vegetables. Images will be of fresh vegetables that accurately portray them. colors will be soft and rustic to match the theme of the farm.

Posted in Web Design Technologies | Comments Off

Module 8 – PHP Strings and Web Design documentation

This week we covered PHP strings and documenting web sites.

Web Programming Section

The assignment was to create a string with PHP code. My web page is located here:

http://jered.0fees.us/module8/index.php

I created some strings using both single quotes and double quotes, then output them as one sentence using concatenation. In the process of concatenating the strings I used str_replace() to replace a word, for the sake of including a string function.

The relevant code is:

$one_string = "<p>This is a waffle that's been";
$two_string = 'concatenated with PHP.</p>';
$output_string = str_replace("waffle", "sentence", $one_string)." $two_string";
echo $output_string;

Strings are values that can be manipulated with the instructions in functions. There are a number of functions associated with strings – that makes sense, given that strings comprise most of the information that will be communicated to a user from a web page or program.

Web Design Section

For this assignment we are to document the web site we’ll be creating for our final project.

Step 1. Define key stakeholders’ goals

The stakeholder is the farmer the site is created for. He wants to display his wares (vegetables), provide information about them to site visitors, and give those visitors the opportunity to purchase his vegetables.

Step 2. Identify your users’ goals and expectations

The users are site visitors who are interested in purchasing vegetables online. They’ll expect a site that lets them readily find information about what vegetables are for sale and purchase them easily.

Step 3. Define your site’s content areas

Pending a discussion with my eventual partner, I expect the site would be divided into a landing page, a main page to list the vegetables, pages for each vegetable on offer (turnips, radishes, and spinach), a page to check order status, and a page with information about the farmer.

Step 4. Organize the content areas

The landing page would be the first site in the hierarchy, and would link directly to the vegetable page and to the farmer information page. The vegetable page would in turn link to individual pages for each vegetable.

Posted in Web Design Technologies | Comments Off

Module 7 – PHP Functions and Rollover Images

This week we covered PHP functions and rollover images. My web page for the assignment is here:

http://jered.0fees.us/module7/index.php

Web programming section

I used a simple function and if/else block for the web code. The syntax was fairly similar to other languages.

One thing that struck me right off the bat was that an error in PHP code could cause the page to fail to load – omitting a semicolon yielded a 500 server error. JavaScript is more forgiving, just skipping that code instead of blocking the whole page.

Another difference is the way variable scope is handled. As I recall, JavaScript will use a variable from outside a function simply by referencing it, while in PHP you have to explicitly import a global variable into a function.

The if statement seems to work similarly in both languages. Function definitions are also similar between the two, with both languages being loosely typed and not defining return types.

Web design section

For the web design portion, we needed to add an image to a page that would change when someone hovered the cursor over it. I went looking for a way to do it with CSS, using :hover, and that started looking a bit complicated. Then I came across some simple JavaScript to do the same thing (using onmouseover and onmouseout to change the image displayed via this.src). Then I kicked myself for not thinking to check JavaScript first, and went with that approach. The HTML is much easier to read with the JavaScript approach.

Posted in Web Design Technologies | Comments Off

Module 6 – Introduction to PHP and CSS

Web Programming Section

This week the first assignment was to create a PHP page and upload it to my web space. The URL of the page is:

http://jered.0fees.us/module6/index.php

Next we were presented with a list of questions and directed to choose the correct answers. My questions and answers are:

Question # 1
A. PHP server scripts are surrounded by delimiters, which one?
A3. <?php…?>

Question # 2
B. How do you write “Hello World” in PHP
B1. echo “Hello World”;

Question # 3
C. All variables in PHP start with which symbol?
C2. $

Question # 4
D. What is the correct way to end a PHP statement?
D1. ;

Web Design Section

This week we were asked to create a CSS style sheet. I created mine at the following URL:

http://jered.0fees.us/module6/module6style.css

Cascading style sheets are useful in a number of ways. For one, it separates style from content – the main section of a web page can consist primarily of content to be presented to the user, making it easier to read in HTML form. Using CSS also provides stylistic consistency, as several pages can import style information from a single CSS file. On top of that, website design changes become easier to make because you can make a style change in a single file, then every HTML page on the site that uses that stylesheet will automatically use the new style. Pages styled with CSS will usually load faster than pages formatted with frames and tables. And because CSS can be easily overridden by a web browser, using CSS aid accessibility by allowing users to use larger font sizes or more dyslexia-friendly fonts.

The following are my questions and answers for the web design part of the week’s assignment:

Question # 1
A. What is the correct CSS syntax for making all the elements bold?
A2. span {font-weight:bold}

Question # 2
B. What property is used to change the text color of an element?
B3. color:

Question # 3
C. The # symbol specifies that the selector is?
C4. id

Posted in Web Design Technologies | Comments Off

Module 5: JavaScript Form Validation and Wireframe Design

For the web programming portion of this week’s assignment, students were asked to create a form that would validate input using JavaScript. The web page with the form code is here:

Module 5 web page

Deciding to try to validate the email caused me the most trouble – mostly because I tried putting quotes around the regular expression at first. That was clearly a mistake.

For the web design portion of the assignment, students were asked to create a wireframe of a website.

I’m working on a website for the Sulphur Springs Museum for my Senior Capstone project, so I created a wireframe of the site redesign so far. This should be useful for me as I can move elements around and tweak them to see what works before implementing it on the new site.

I used LucidChart to make the wireframe – they offer free accounts to students, and I’ve used the site before.

The wireframe is embedded here (click to enlarge):

Wireframe of the proposed website redesign for the Sulphur Springs Museum

You can also view it on the LucidChart website for a closer look.

The goal of the newer site design is to use a more modern aesthetic than what they have now. The top bar will have menus to navigate the site and links to email the museum or visit their Facebook page. Below that is the title of the site, with a search button to the right. Below that will be a rolling image bar that will display images from Sulphur Springs, both historically and modern-day.

Below the rolling image eye-catcher will be images that link to the major informational sections of the site – a list of exhibits, museum news, and a page providing background about the museum. Then at the bottom of the page is a video about the museum – I might change that presentation, for now the video is there to mimic that part of the current site’s design. I plan to replace the video with a map and photo of the museum, then, but don’t want to do that until I talk to the museum director about that design choice.

I wanted to keep the landing page fairly uncluttered overall – the pages with more content will include a sidebar listing recent posts, a calendar of upcoming events, and a link to Google Maps. I feel like a simple landing page will focus people on the elements that would be more likely to hold their attention (like the exhibits), then the pages after that can present more information.

Posted in Web Design Technologies | Comments Off

Module 4 – JavaScript Conditional Statements

The assignment was in two parts – write JavaScript that tested two conditions with AND in an if statement, and save an image in different formats to see how they compared.

The webpage with the JavaScript and images is here:

http://jered.0fees.us/module4/

The JavaScript was similar to working with if/else statements in other languages, apart from the loose typing – being able to toss a number and a string into the same variable, for example, then test them, was different from Java. I also put the test into a function and called it twice, for fun.

For the image, I took a large JPG file, reduced the dimensions to 1022×576, then converted it to GIF, JPG, PNG 8-bit, and PNG 24-bit. The 24-bit PNG was the largest file at 905k, the 8-bit PNG was the smallest at 259k, and the GIF and JPG were close to each other in size – 361k and 367k, respectively.

The image quality of the resulting images was pretty similar to my naked eye. At first glance, the images aren’t too different.

Looking closely, the GIF image’s limited number of colors don’t handle shadows and shades of white very well – there isn’t a smooth progression from one shade to the next. The eyes on the pottery especially have that problem.

The other three formats looked similar to each other. I expected the 8-bit PNG to look more like the GIF file, but I wasn’t able to pick out significant differences between it and the JPG and PNG-24, to be honest.

Posted in Web Design Technologies | Comments Off

Module 3 – Image Formats

The assignment was to create an image, save it in JPG, PNG, and GIF formats, and compare them. The result is on the page here:

http://jered.0fees.us/module3/

For the image, I took a picture with my phone. The phone stored the photo as a JPG. I then converted that image to the two other formats, and resized all three to a width of 1024 for better web viewing than the larger original.

I was surprised to see the GIF compare reasonably well to the other formats in terms of visual quality. Looking closely I can see that the colors in the GIF are bit washed-out compared to the others, but it wasn’t a difference that stuck out at first glance. I didn’t see a difference between JPG and PNG, though the initial image being in JPG format might have influenced that outcome.

The JPG was easily the most web-friendly of the three, coming in at around 61k. Next was the GIF, at 308k. Then the PNG, the lossless format, was 1220k, far and away the largest. The PNG would definitely be the least web-friendly format, as that size would slow a page’s load time quite a bit (especially a mobile phone using wireless data).

I was able to load the images in both desktop and mobile browsers.

Posted in Web Design Technologies | Comments Off

Module 3 – JavaScript Variables

The assignment asked students to create a web page that uses multiple JavaScript variables. The result is here:

http://jered.0fees.us/module3/

Variables weren’t hard to work with – it’s a similar paradigm to other languages, so declaring variables the first time you use them is familiar enough. I had to work at figuring out using innerHTML – specifically, that running it a second time on the same element will overwrite the contents of the element. I also experimented to see if JavaScript would let me concatenate numbers and strings in a similar fashion to Java (which it does).

Posted in Web Design Technologies | Comments Off

Module 2 – HTML and JavaScript Syntax, Structure, and Coding

For module 2, the class was asked to create an index.html page for the 0fees site account we’d created in module 1. My page is here:

http://jered.0fees.us/

Most of the assignment was review – make a web page, include a title, text, and an image, etc. New for me was adding JavaScript to the page. I didn’t try to do anything fancy – the example given used document.write(), so I used that too. Uploading the page and image wasn’t difficult – I have a lot of past experience working with sites via ftp and sftp.

One element I did pause to research was whether or not to embed the javascript code in an HTML comment. One slide in the presentation showed the code without the comment, but another slide and the assignment example did include it. From what I gathered (mostly from looking at StackFlow questions on the subject), leaving the comment out is a good idea. Modern browsers know about the script tag so they won’t display the text inside, and there are occasional cases where the comment can cause issues (like not being able to use “–” to decrement in the code).

I also felt that I should use an original image instead of dealing with potential copyright issues by borrowing one. I am, unfortunately, a terrible artist.

Posted in Web Design Technologies | Comments Off