Certificate IV in Information Technology

South Regional TAFE, Albany Campus, Western Australia


Web Design

Whereas in Certificate III in IT we were just expected to create static web pages--such as the one you are looking at right now--with limited utility in an online business environment, in Certificate IV we went much further than that and moved on to combining our object-oriented programming skills we had learnt the previous semester with the HTML5 and CSS3 we already knew, as well as picking up far more advanced methodologies of web design to create our dynamic web pages.

What actually happened in 2017's Certificate IV was, our two web design assessments were rolled into one: we started with the static Scorched Earth Photographics website and finished with the Scorched Earth extension project, rather than create a whole new website (which was going to be called Bluegrass Music).

We were assessed on the following four units:

First things first, as they say... what is a dynamic web site? If you'd care to view this short PowerPoint presentation, it will tell you a bit about the subject:

Dynamic Web Design [276.3KB]

Note that this presentation touched upon PHP, which Cert IVs from past semesters learnt, but it did not cover C# Razor syntax, which we learnt at TAFE in 2017--the first students to study C# at South Regional TAFE! I will explain more about how we implemented the programming language in dynamic web design as we go along, since I found it the most challenging and yet the most interesting part of Cert IV as a whole.

"So let's get started..." with the static web design. For my Scorched Earth Photography website, I created a mockup in Draw.io to get a general feel of what the website was going to look like, and from then on we looked at what we wanted it to do.

Scorched Earth mockup

Scorched Earth website mockup


Scorched Earth Photographics: Project brief

Scorched Earth Photographics is a small photography business, specialising in landscape images from Australia and macro photography of Australian flowers, insects and small reptiles. They will do some small portrait jobs but they do not have a photography studio, so all portrait work happens outside or in the client’s home.

The business is owned and run by Jane and Andrew Phillips, with Jane and Andrew performing all functions for the business.

They require a website that can be used to display their photographs.

This display concept is in two parts. An open gallery that can be searched by keyword or browsed by photo type (panorama, standard landscape, macro); and a closed section for clients to log in to view portraiture or other commissioned work.

Whilst it is not necessary to have it working now, Jane and Andrew wish to be able to add online ordering (shopping cart) functionality at a later date.

Scorched Earth does not currently have a logo, but they want the business name to be clearly visible on ALL pages and for the colour scheme of the site to reflect the idea of Australia’s Scorched Earth desert regions. Jane and Andrew also believe that the concept behind the scorched earth name talks to the idea of things being twisted and malformed (like old ruined machinery in the landscape). As such, they want the design for the site to be minimalist and somewhat radical, stepping away from the usual “stuff stuck in boxes” designs that dominate the internet.

Scorched Earth are aiming their business at cashed up hipsters and trendies and as such don’t care particularly about users with older, outdated equipment. They want their site to be 1200 pixels wide and for all images to be displayed at a minimum of 350 pixels in width. Scrolling is NOT ok, so if a search returns a lot of results then they want the user be given a menu option to view the next page of results etc.

Whilst not caring about older equipment, Scorched Earth must make an attempt at making their site accessible to people with disabilities.


Extracurricular study to get up to scratch

N.b. A lot of us, myself included, struggled with the server-side scripting part unit of this course, and so I personally feel that I should recap on it by developing another dynamic website tailored to my own specifications. This would serve the purpose of being the official website for my nascent Database Design (D.D.) Solutions business and would enable me to refine my web design skills as well as showcase my business angle to prospective clients. But that "D.D. Solutions" website will come together somewhat later on, perhaps after much research and a bit of experience in the IT industry too.

Since new material needed to be introduced into this section of the course, I am posting a link here to some material that we needed to become familiar with before we could progress much further.

Introduction to ASP.NET Web Programming Using the Razor Syntax (C#) [681.1KB]

Take note of this diagram (from the PDF linked to above), as it neatly illustrates how the .NET framework, ASP.NET, and C# for online programming (a.k.a. Razor) all fit together.

ASP.NET pyramid

The "pyramid" of the .NET Framework, ASP.NET and Razor (C#/VB)

To quote the same document, "The Razor syntax is based on the C# programming language, and that's the language that's used most often with ASP.NET web pages. However, the Razor syntax also supports the Visual Basic language, and everything you see you can also do in Visual Basic."

To summarise in point form the most important content of that document (if you don't feel like reading through the whole thing), here are Tom FitzMacken's Top 8 Programming Tips:

  1. You add code to a page using the @ character
  2. You enclose code blocks in braces
  3. Inside a block, you end each code statement with a semicolon
  4. You use variables to store values
  5. You enclose literal string values in double quotation marks
  6. Code is case sensitive
  7. Much of your coding involves objects
  8. You can write code that makes decisions

We actually learnt these principles in our Certificate III programming unit, but expanded drastically on tips 7 and 8 in Certificate IV for our dynamic web design.

Making the transition from Static to Dynamic

The first edition of Scorched Earth only required very few components: so few, they can be considered the final product of the static page (or, "prototype" if you will) listed here as dot points.

The next thing we looked at was how to restructure our web pages. Just as a CSS stylesheet applies formatting to all pages that link to it, so also does a certain type of .cshtml (C# HTML) file written for ASP.NET "let you create a separate file with a content block that can contain text, markup, and code, just like a regular web page. You can then insert the content block in other pages on the site where you want the information to appear." (Quoted from the PDF linked to below)

For more information, take a look at at this valuable, informative PDF:

Creating a Consistent Layout in ASP.NET Web Pages (Razor) Sites [717.5KB]

ASP.NET Web Pages (Razor) 3 changes the whole way a website is structured by breaking it down into Content blocks (including Headers and Footers if required); Layout pages; the RenderPage, RenderBody and RenderSection methods; and the PageData dictionary "that lets you share data between content blocks and layout pages."

Also, "It's common practice to store files that are shared among web pages in a folder named Shared." In our case, these files were _Layout.cshtml, _LogBox.cshtml and _SearchBox.cshtml so as to allow access to the layout (or basic site design and forms common to all pages). We stored our classes (for our OOP programming) in an App_Code folder: I called mine cDB.cs, cLogin.cs, cPassword.cs and CSearch.cs, which more or less describes their purpose and utility and allows for the solution quick access to pre-written code.

Here's a glimpse of the final deliverables that we ended up submitting for our Scorched Earth Photographics project:

Visual Studio Solution Explorer

Deliverables viewable in Solution Explorer


Putting it all together: T-SQL, HTML, CSS and Razor (.cshtml)

I really enjoyed using MySQL/MariaDB in Certificate III... and I was hoping for more of the same, but to my surprise, we ended up using Microsoft Access in our Certificate IV Databases units, just like the Certificate IIs did in their course. One pleasant excursus our OOP lecturer showed us was to how to get our James Bond DB (in MySQL/MariaDB) connected to the search bar of the Bond website using PHP. However, we did not persist with PHP. I will cover some SQL in this section of this page, since database (in this case, T-SQL) integration is a large part of dynamic web design and one that we used to a greater and more involved extent than we did in Certificate III with MySQL.

SQL Server Object Explorer

Visual Studio 2017's SQL Server Object Explorer



Here follows the Scorched Earth Extension Project document, which outlines the functionality we were required to implement therein.

Scorched Earth Extension Project [26.7KB]

The following PDF shows some of the complex code we were required to use in order to get the photographics website doing what was required in terms of usability and functionality:

Sample Razor Code [21.5KB]

Do have a read of it... if you find this sample code baffling, you are not alone! I find it confusing too and it took a lot of extra work on my part and added explanations on the part of our lecturer for us to finally implement it and get a website up and running.

N.b. This particular code is designed to search for and display photographs by search keyword, much like Google Images (but on a much smaller scale).

Links to ASP.NET State Management Information

These Microsoft Developer Network links are helpful to read to get a better grasp of what a dynamic website with session management can do, e.g. client registration and user logins to personal areas of websites, storing and retrieving values for users (e.g. stored passwords etc.):

ASP.NET State Management Recommendations

ASP.NET Session State Overview

After creating a static website for Scorched Earth Photographics, our next task was to implement these principles into our design. This took many of us several weeks, especially considering how unfamiliar this aspect of web design was to all of us. In fact, it took so long for some of us that the lecturer was obliged to cancel our second assessment and simply extend this one with some additional assessment criteria.

Salted Password Hashing

Since we utilised it in our project, a few words on Salted Password Hashing would not be out of order here, and this document explains the principles behind this method of encryption better than I could:

Salted Password Hashing [436KB]


In the following section, I am simply copying and pasting my lecturer's code from an example exercise which introduced us to some of the nuances of T-SQL, and adding my own comments thereon. What follows is just a sample of the kind of DDL (and later DML) scripts to do exactly as the unit title says: "Apply structured query language to extract and manipulate data."


/*
Date: 10/02/2017
Author: Ramin Majidi
Purpose: Database schema creation script DDL for demonstration.
*/

/* DROP DATABASE db_ddl_demo;
*/

CREATE DATABASE db_ddl_demo;


/*
GO forces one bit of the script to be run before anything else happens
Runs it as a separate batch
*/

GO

USE db_ddl_demo;

CREATE TABLE tblPerson
(
 fldID BIGINT NOT NULL PRIMARY KEY IDENTITY,
 fldFirstName VARCHAR(30) NOT NULL,
 fldLastName VARCHAR(30) NOT NULL,
 fldUserName VARCHAR(20) NOT NULL UNIQUE,
 fldPassword VARCHAR(20) NOT NULL,
 fldEmail VARCHAR(100) NULL
);


CREATE TABLE tblCompany
(
 fldID BIGINT NOT NULL PRIMARY KEY IDENTITY,
 fldName VARCHAR(80) NOT NULL,
 fldTelephone VARCHAR(20) NULL,
 fldEmail VARCHAR(100) NULL
);

CREATE TABLE tblEmployee
(
 fldID BIGINT NOT NULL PRIMARY KEY IDENTITY,
 fldFKPersonID BIGINT NOT NULL,
 fldFKCompanyID BIGINT NOT NULL,
 fldEmail VARCHAR(100) NULL,
 FOREIGN KEY (fldFKPersonID) REFERENCES tblPerson(fldID),
 FOREIGN KEY (fldFKCompanyID) REFERENCES tblCompany(fldID)
);


I don't expect the reader to understand all this, but if you are a student or a lecturer, you may notice that some of the data types are different from MySQL and the GO command is necessary to run the code. All we're actually doing here is defining a very small example database and adding tables to it that can hold data, with certain limitations. DDL, by the way, stands for Data Definition Language, as contrasted with DML (Data Manipulation Language)-- queries etc.

Now let's revisit some of the SQL I utilised in my Razor code for photo keyword searches.


// If a keyword has been entered by the user, create a
// subquery that will be substituted into the main query
 sKeywordClause =
@" AND EXISTS (
 SELECT * FROM
 tblPhotoKeyword PK INNER JOIN
 tblKeyword K ON PK.fldKeywordID = K.fldID
 WHERE PK.fldPhotoID = P.fldID
 AND K.fldKeyword LIKE @pKeyword)"
;

Remember that the main query (sQuery) was as follows:


String
sQuery =
@"
SELECT
P.*
FROM
tblPhoto P
WHERE 1 = 1"
+
sPhotoTypeClause +
sKeywordClause +
@" ORDER BY
P.fldID
"
;

Obviously, if nothing was entered into the search box, all accessible photo results would be displayed. The LIKE operator checks to see if the text passed on to the variable sKeywordClause matches in any way the keywords associated with the photos listed in the database of the website, a database which is part of one big solution involving images, markup, a layout page, SQL scripts, etc. This may have been more complicated if we were using PHP and MySQL were involved, although the two technologies interface nicely too nowadays and are considered industry-standard.

Note especially that the above code looks like a strange jumble of C# and SQL. That's not by accident!

The Final Product

Here's the final product of my Scorched Earth dynamic website (click for larger image):

Scorched Earth Website

Scorched Earth Photographics, by Leo C.


The Project Plan

In many of the classes I took in Cert IV, there was a fair bit of documentation to do, such as our Scorched Earth project plan. This is valuable knowledge that can be applied to any similar business venture in web development or any other field of IT. We had to write varying amounts for each of these headings:

  1. Purpose
  2. Key Stakeholders
  3. Intended Audience
  4. User Interface
  5. Data Requirements
  6. Milestones
  7. Clarifications
  8. Platform Requirements (Hardware / Software)
  9. Deliverables
  10. Disclaimers
  11. Scope / Constraints
  12. Ownership of Intellectual Property
  13. Technical Support
  14. Costings
  15. Signoff

There were also Appendices such as an ER Diagram/Data Dictionary. We submitted the Project Plan as one .docx document to the lecturer for review, as well as our final Scorched Earth Extension Project (some of us--including myself--on the last day!)

The Knowledge-Based Tests/Questions (KBTs/KBQs)

These three tests (or, series of questions) were designed to test our understanding of the units we had just covered in an open-book environment, i.e. one where we could access the internet for our research. The three topics were:

  1. Create a markup language document to specification
  2. Produce server-side script for dynamic web pages
  3. Apply introductory object-oriented language skills

I wouldn't consider them sufficiently interesting to put on this website, but if you are a Cert III and you are reading this, this is what you will need to be prepared for. Don't worry, the KBTs/KBQs are quite easy after you've done the class exercises and major assessments.


Addendum: Class exercises in Object-Oriented Programming

Some of our class exercises, on the other hand, are sufficiently interesting to put on here, and I am including the most interesting snippets of code and taking screenshots of a few exercises along with my best explanations for you to examine at your leisure. Consider it a reprieve from all that difficult subject matter I just made you trudge through!

Zoo program

GUI of the Zoo program

Code from CAnimal.cs class from the "Zoo" program in Visual Studio:


namespace Zoo
{
 class CAnimal
 {
 internal String _sName;

 internal Int32 _iNumLegs;

 public String Name
 {
 get
 {
 return _sName;
 }

 set
 {
 _sName = value;
 }
 }

 public Int32 NumLegs
 {
 set
 {
 _iNumLegs = value;
 }
 }

 public virtual Int32 numberLegs()
 {
 return _iNumLegs;
 }
 }


 class CMammal: CAnimal
 {
 public override String ToString()
 {
 return "Mammal: " + _sName;
 }

 public override Int32 numberLegs()
 {
 return _iNumLegs * 10;
 }

 }

 class CReptile : CAnimal
 {
 public override String ToString()
 {
 return "Reptile: " + _sName;
 }

 public override Int32 numberLegs()
 {
 return _iNumLegs * 100;
 }
 }

 class CInsect : CAnimal
 {
 public override String ToString()
 {
 return "Insect: " + _sName;
 }

 public override Int32 numberLegs()
 {
 return _iNumLegs * 1000;
 }
 }


}


Zoo program

The Zoo program in action!


The code behind the program itself, just called frmMain or something along those lines...



namespace Zoo
{
 public partial class frmMain : Form
 {
 public frmMain()
 {
 InitializeComponent();
 }

 private void frmMain_Load(object sender, EventArgs e)
 {
 CMammal oMammal = new CMammal();

 // Write to the 'set' accessor of the property...
 oMammal.Name = "Fred Flintstone";

 // Read from the 'get' accessor of the property...
 //txtMammal.Text = oFred.Name;

 // Read the ToString() override...
 txtMammal.Text = oMammal.ToString();


 // As before, but with the CReptile class...
 CReptile oReptile = new CReptile();
 oReptile.Name = "Tiger Snake";

 txtReptile.Text = oReptile.ToString();



 // As before, but with the CInsect class...
 CInsect oInsect = new CInsect();
 oInsect.Name = "Grass-hopper";

 txtInsect.Text = oInsect.ToString();

 }

 private void btnReload_Click(object sender, EventArgs e)
 {
 CMammal oMammal = new CMammal();
 oMammal.Name = "Barney Rubble";
 oMammal.NumLegs = 2;
 txtMammal.Text = displayAnimal(oMammal);

 CReptile oReptile = new CReptile();
 oReptile.Name = "Skink";
 oReptile.NumLegs = 4;
 txtReptile.Text = displayAnimal(oReptile);

 CInsect oInsect = new CInsect();
 oInsect.Name = "Fly";
 oInsect.NumLegs = 6;
 txtInsect.Text = displayAnimal(oInsect);

 }


 // This method receives as a parameter an object of
 // CAnimal type
 // It returns a String representation of that object
 // Note that any objects of classes derived (inherited from)
 // CAnimal may also be sent to this method...
 private String displayAnimal(CAnimal i_oAnimal)
 {
 return i_oAnimal.ToString() + " Num Legs: " + i_oAnimal.numberLegs().ToString();
 }
 }
}


And there you have it: a very brief overview of dynamic web design, and a gruelling taste of object-oriented programming leading up to the final extension project. I must say I thoroughly enjoyed this part of Certificate IV, though working under a deadline made me feel stressed at times.

If I were to broaden my knowledge base at all, on my own initiative, that is, it would be to learn how to create a database-driven web site using PHP and MySQL. Just a projection for the future...



Home