week 1 · web viewdesign a website blog using a framework frameworks & 3 column grids i created...

Adam Johnston - Web Development Blog

Table of ContentsWeek 1 3

Design a website Blog using a Framework 3

Frameworks & 3 Column Grids 3

Responsiveness & Navigation 4

10 Quick & Useful Features of Bootstrap 5

Hamburger Menu Example 6

QR codes & Barcodes 6

Traditional Barcodes 6

Week 2 7

Database Design - Normalisation Practice 7

Normalisation Task 8

Process of Normalisation 9

Unnormalised Form 9

1st Normal Form 9

2nd Normal Form 9

3rd Normal Form 9

Notes: 9

Reflection 9

Cat Website Database Plan 10

Week 3 11

JSON 11

Week3 continued 13

Week 4 15

User State & Sessions 15

Hashing & Salting 17

Client-Side vs Server-Side Validation 19

Server-Side 19

Client-Side 19

Validation 19

Security, Hashing & Salting 20

Top Security Tips - 20

File Transfer Protocol 21

Week 6 22


Model View Controller (MVC) 22

Week 7 23

Content Management System 23

Jquery 24

Image Upload via Mobile & Desktop 25

jQuery Mobile CMS 27

Week 9 28

XML 28

Critique of Work 29

Portfolio 1 29

Portfolio 2 30

Portfolio 3 31

Portfolio 4 33


Week 1

Design a website Blog using a Framework

Frameworks & 3 Column Grids

I created a three column grid with Bootstrap because I am familiar with the framework. However, I had a look at HTMLKickstart and pureCSS.io and the differences between the grid systems. They all provide a responsive grid with varying syntax. It is a much easier alternative to using tables which is frowned upon in terms of SEO and Validation. Also saves a lot of time coding as frameworks already have classes pre-determined.


Responsiveness & Navigation

The framework grid system is good because you can define the layout with a simple css class to vary between different screen sizes.

Bootstrap has 4 grid classes:

1. xs (for phones - screens less than 768px wide)2. sm (for tablets - screens equal to or greater than

768px wide)3. md (for small laptops - screens equal to or greater

than 992px wide)4. lg (for laptops and desktops - screens equal to or

greater than 1200px wide)

You can combine the different classes on the same element to ensure it works cross-platform and responds to various devices.


10 Quick & Useful Features of Bootstrap

1. Responsive Breadcrumb menu style2. Glyphicons (vector graphics to convey metaphors)3. Responsive Image4. Dropdown boxes5. Styled Buttons6. Responsive Grid System for Layout7. Alerts8. Styled Tables9. Styled Forms10. Image Carousel


Hamburger Menu Example

QR codes & Barcodes

QR codes can be a good tool for enabling quick access to your website. It can be incorporated on many forms of advertising like posters, social media, business cards and even t-shirts.

They are particularly popular in the US but if you look out for them you’ll notice them all over.

All you have to do is scan the QR code (above) and you’ll be directed to the website.

Traditional BarcodesQR codes hold more information than the traditional Bar-Code because the traditional barcode is horizontal as the QR is both horizontal and vertical which holds more data.


Week 2

Database Design - Normalisation Practice


Normalisation Task “Store details of a film. A film has a title plus some images and a description. It also has

actors and we need to sore details of the main actors. But actors star in more than one film.(Directors are the same plus actors direct!)”

“On a the film site a registered user can input comments which consists of text plus apotential image. They can also comment on comments; and comment on comments oncomments etc.”


Process of NormalisationThis week we looked at the design of a database. The process is called normalisation which builds an understanding the structure of data. The goal is to remove redundancies such as insert, update and delete anomalies.

Unnormalised Form● Define Primary Keys

1st Normal Form● Remove Repeating Data● Check nothing will repeat by carrying out a “sanity check” - example “will this data

repeat when entering it into a database?”● Create Compound Keys if necessary

2nd Normal Form● Each Non-Primary Key must depend on a whole Primary Key● No partial dependencies on a regular key - Take key away from it and make it

depend on the relevant primary/ compound key.● Keys must rely on a PK/ CPK

3rd Normal Form● No transient dependencies on another key (e.g the key lasting a short time after a

sanity check)● No Non-Key relying on another Non-Key

Notes:Compound Keys are where you combine two keys to create a Primary Key (Unique Identifier)Foreign Keys are where you link a table to another table which has a UID.

ReflectionI find it difficult to go through the stages of normalisation. I tend to jump from UNF to 3NF. I usually visualise the data in 3NF. But it’s relevant to go through the stages to negate any update, delete and insert anomalies. That’s the main goal of Normalisation and creating a Relational Database.


Cat Website Database Plan

ID Name Weight Temperament Life Rank Allergy Origin

1 Exotic Shorthair

14 lbs Quiet, Lovely, Sweet 12-15 Years

1 No United States

2 Persian 14 lbs Gentle, Sensitive, Quiet 14-15 Years

2 No Iran (Persia)

3 Maine Coon 22 lbs Gentle, Intelligent, Independant

12-15 Years

3 No United States

4 Ragdoll 20 lbs Gentle, Quiet, Friendly 12-17 Years

4 No United States

5 British Shorthair

20 lbs Easy Going, Family, Loyal 12-17 Years

5 No United Kingdom

6 Burmese 12 lbs Curious, Intelligent, Interactive

15-16 Years

6 No Burma, Thailand

7 Siberian 16 lbs Agile, Intelligent, Loyal 12-15 Years

7 Yes Russia

8 Sphynx 12 lbs Gentle, Quiet, Friendly 12-14 Years

8 Yes Canada

9 Siamese 15 lbs Lively, Clever, Active 12-15 Years

9 No Thailand

10 Scottish Fold 11 lbs Affectionate, Loyal, Playful 11-14 Years

10 No Scotland

11 Norwegian Forest

24 lbs Curious, Intelligent, Loving 12-16 Years

11 No Norway

12 Russian Blue 11 lbs Easy Going, Loyal, Playful 10-16 Years

12 No Russia


Week 3

JSON

I spent hours trying to get JSON to pull images from a folder, i played about with variations of the [{}];, characters, moved folder locations and image urls. Unfortunately I couldn’t get it to work.


However I pulled images from a database with MySQL and PHP on a Bootstrap Framework.


Week3 continuedI decided to give JSON another go and incorporate an API to pull the cats from a Database for Porfolio 1.With persistence and many errors like:

“Call to a member function fetch_assoc() on boolean in <path>”

I eventually managed it and pulled cats from the database using a JSON API that decodes the MYSQL and output’s it with PHP “echo” into HTML format.

The new version is pulled using an API

https://stackoverflow.com/questions/35669088/call-to-a-member-function-fetch-assoc-on-boolean-in-path


Week 4

User State & Sessions Firstly I created the Database that will contain the user credentials. User_ID being the Primary Key (Unique Identifier). I will use their email and password to login, however they may change their email so I am preventing issues if a user changes their email by keeping it a non primary key.

I had issues connecting the database online when making the website live. The database servername was different and I had trouble identifying the new one. I had to contact unlimitedwebhosting.co.uk support as they don’t seem to show their host address anywhere.


Also had some redirection issues...

Always keep session_start(); to the top of the page or errors occur!


I created different login states with sessions as seen below

Hashing & Salting

Login details:

Username: adminPassword: degreeprojectaugmentum2018


Client-Side vs Server-Side Validation

Server-Side

Advantages Disadvantages

Checks data before entering database Data has to be sent to the server first

Don’t have to use plugins like Java/Flash Hackers can exploit potential coding flaws

Scripts are hidden from user Needs to be stored on the server

Enables use of a Content Management System Requires Database Management

Client-Side

Advantages Disadvantages

Fast response to user input Can be avoided by hackers

Many options available (HTML, JavaScript) Not all browsers support scripts

Improve Usability Different platforms/browsers may behave differently

ValidationI used mainly client-side validation with HTML5 for the buy book website

<input type="text" pattern="[a-zA-Z0-9]+" >


Week 5

Security, Hashing & Salting

Top Security Tips -

● Register_variables option in php.ini● ini_set(‘display_errors’) ;● error_reportig(E_ALL) ;● allow_url_fopen = off● Switch of display error messages, Hiding error messages from potential hackers.● Turn off directory listing ● HTC.ACCESS file configuration● Index in all directories and error404 file● Captcha codes or “I’m Not a Robot” by Google● SQL Injection protection with prepared statements/ pre processed input.● $username = make_safe($_POST['username']);● Validate the input is the correct format with JavaScript, check again with PHP. ● Don’t allow special character input.● Check username before insert to database (client and server side validation)● OWASP a tool to check for security issues on your site.● Password hashing and salting, only store the hashed value. Not the raw password.● Backups and site mirroring, backup system in place for webpages and database.● Cookie and Session timeouts.


File Transfer Protocol

I use FileZilla FTP client to connect to my websites. It is a much faster way to transfer files between your machine and the online server. Find your FTP host and setup a login, then you can save the credentials to your machine and transfer files with 1 simple drag & drop. This is a good alternative to the cPanel layout.

Filezilla (above) is local to your machine and quickly visualises your machine file manager against the server file manager to enable the drag & drop. It also has security messages so you don’t overwrite files with an older version.

CPanel File manager is more clunky and you have to use it via the browser.


Week 6

Model View Controller (MVC)It is an pattern for implementing a user interface on a computer. For example, a website. The website will be divided into three interconnected parts. It enables efficient editing and code reuse, it helps reduce risk when editing one piece of code and ruining another part of the application/website.

Model - Represents the dataView - Displays the model data and sends user actions to the controller like user input and clicks.Controller - Provides model data to the view and interprets the user actions/ clicks. The model is not dependant on the controller or the view. Removing this dependency can improve code maintainability. Good for reusing code.

I update only one file for my header, footer and database connection file. This means I only have to use one line of code on each page and I can easily update the header, footer and database connection without ruining pages or copying/pasting multiple times.


Week 7

Content Management System

Cat/Pet Website


JqueryVideo and photo enlargement implemed with jQuery frameworks


Image Upload via Mobile & Desktop


jQuery Mobile CMS


Week 9

XML

The XML exercises were fairly straight forward. I decided to add some XSLT styling to some of the contact data. I then loaded XML into an object model and displayed it on screen with XSL. You can navigate the contacts by clicking their links and it displays their contact details like phone number and email address.

This also works on mobile and I can quickly click the number and call it.

Had a few issues pulling xsl content and got a few error messages but eventually got it to display


Critique of Work

Critique of Work

Portfolio 1The framework I used was bootstrap to create a blog website including a grid system. The website is responsive and tested on desktop, tablet and mobile devices. I used cat images and information, this is all on the content management system website. The blog has 12 sections and the cat website pulls data from a database for over 12 different cat images.

I used aspects from Model View Controller logic and separated CSS, PHP and HTML pages. It was especially useful for PHP because I only had to edit one file and it would change on all relevant pages. It saved a lot of time maintaining the header, footer and moving the database from locally on easyPHP onto different servers.PHP code on the cats website uses bootstrap grids to display the cat images rather than a table. This keeps them responsive even when adding more cats through CMS admin login.

I decided to include the textual information of my blog on this website, however I also have a separate document with a full blog including screenshots. My blog site is the hub for all my other portfolio pieces and they can be accessed from there via hyperlinks. I uploaded files with FileZilla FTP client and created subdomains for my other portfolio elements.

Overall I think I have demonstrated a very in depth use of PHP. I have a completely dynamic website/ content management system with a login and dynamic paginations which happen during search functionality. However, I need to spend more time on security on this website as it could probably be hacked with SQL Injections. I added some client-side validation for protection. This should be easy to implement. I spent too long on CSS and styling for my Blog & Cat website where I should have focused on fixing more PHP errors, stress testing, validation and security.

I then went on to build a simpler website, without CSS and used very basic Bootstrap as a framework. I wanted to focus on the back-end. The challenge for me here was building an API. I was using languages such as JSON, AJAX and PHP together which for me who loves PHP was difficult. I eventually, after many errors, managed to create a working API. The 12 Images are converted to HTML via JSON and PHP pulled from a MYSQL database all within a function from and API. You can then click on each individual item and pull more data based on the ID which is another function from the API. I was very happy I achieved this.


Portfolio 2Again I used the bootstrap framework for this website. The user can register, login and continue to purchase a book. I worked a lot with user sessions and giving feedback depending on different scenarios like entering a wrong password. The focus on this task was security. I could have spent more time hashing and salting the user passwords when they were entered into the database.

The website demonstrates some validation through HTML5. I have demonstrated more validation and security on the Cats website with HTML5, JavaScript which are the client-side and then some server-side with PHP. I edited the HTC.Access file to make the site more secure.

The user can follow the website and enter the amount to purchase. I spent too long trying to figure out if I should have calculated the final price of the book(s). I experimented with different JavaScript functions and variables and also tried using PHP sessions. I think I over-complicated a simple task and in hindsight I should have just spent the time Hashing/Salting.

However I have demonstrated user states with sessions. I also generated a QR code for this website which is mentioned and screenshotted in my blog.

I managed to SALT/HASH a password (which i will include in the credentials.docx) to the database so I’m glad I got that box ticked. However the website is not at a standard that I feel is perfect but it does show that I can use different technologies. It is something I definitely need to work on in the future.


Portfolio 3This portfolio required the use of JQuery Mobile which I did experiment with. However I do not like the framework as it does not have as many functions as Bootstrap which I am more efficient at coding with.

I demonstrated further than the requirements of the content management system of this task but on a different framework. The admin user can login and is directed to the admin tools. (logins will be included in the upload document).

The admin tools & CMS include:● New Profile

○ Name○ Description○ Category○ Feature on Homepage○ Attach PDF file

● Edit Profile○ Name, Description, Feature & PDF○ Image file upload (with server-side validation & optimization)○ Preview Profile○ Delete Profile○ Duplicate Profile

● Category○ Add new Category○ Edit or Delete Category○ Add Category Image○ List Categories

● Sub-Category○ Select Category○ Add new Sub-Category○ Edit or Delete Category○ Add Sub-Category Image○ List Sub-Categories

● User Settings○ Validate credentials○ New username, password○ Logout

● Search Functionality○ Search for Profile○ Display Profiles - Click profile for more info - Edit (if logged in as admin)○ Pagination (If more than X amount of results, create new page of search results)

Although I demonstrated simple use of JQuery Mobile framework I should have stuck to the given task and not used Bootstrap. But I am happy with the functionality of the site on desktop and mobile. I did encounter hundreds of PHP errors during development of this site which I


have learned a lot from. Some of these errors are included on my blog. It often is something simple like redirecting wrong or changes to the styling but it take a lot of time spent fixing even small errors. Images upload sufficiently on Desktop & Mobile. However some feedback error messages may apply if the file size is too large. I could have spent more time optimizing the images. Smartphones nowadays take very large images up to 10 MB which is not efficient for a website.

On a second attempt, I shown a very brief example of the ugly jQuery mobile styling and linked back to my very advanced content magagement system. I showed the use of jQuery and complex PHP/MYSQL skills.


Portfolio 4

XML Manipulation

For this task I manipulated contacts with XML and styled them using XSLT. I demonstrated pulling the data with XSL/PHP and XML via the model.

I just used some dummy information for the contacts and displayed them in different ways. They can all be found on the website referenced below. I started with a HTML page linking each demonstration as a bootstrap button link, each page has a back button included for easy navigation.

I displayed -● Staff list (contacts) by name● Staff list of contacts, by name. Names are clickable as hyperlink to view contact

name, phone numbers and email address.● Contact List by Number● Contact List by Email address● All contact info styled in table with XSLT

Overall I found the XML task very simple and not at all challenging, I would like to see the capabilities of XML and research why it is used so much on the Internet. I have read many sources saying how popular it is but am unsure as to why because it seems very outdated.I covered each aspect of this portfolio element successfully.

My other experience with XML was creating the API. It is a very easy language to read and I can see why it could be useful in creating an API to output HTML.

I think with some more experimentation with the XSLT styling rather than CSS you could come out with some interesting results. XML seems very data driven and reminds me of table content.

References -http://xml.adamjcharles.com/http://xml.adamjcharles.com/example1.phphttp://xml.adamjcharles.com/example3.phphttp://xml.adamjcharles.com/numberdirectory.phphttp://xml.adamjcharles.com/emaildirectory.phphttp://xml.adamjcharles.com/contact.xml

week 1 · web viewdesign a website blog using a framework frameworks & 3 column grids i created...

Documents