Skill Set for the Modern Website Developer
Although HTML and CSS are used on all websites that I make one website in particular makes extensive use of jQuery, PHP & mySQL.
WordPress design:
html, php, javascript, jquery, css & sass.
Example Site showing website developer skills.
WordPress Design
Although HTML and CSS are used on all websites that I make the Winstanley St. Aidans Football website makes the most use of jQuery, PHP & mySQL.
DYNAMIC PAGES
jQuery and PHP allow the content of the page to change depending on the user interaction. This makes for a more interesting and informative experience for the user and for the developer!
Client admin experience
There’s no need for the client admin to see any of the WordPress admin pages. All the data is input via the admin section of the site. All results, player profiles, man of the match and goals scored etc. can be entered and edited using this method.
AUTOMATIC UPDATES
All data entered is stored in the database and is immeadiately available to the website user including league table and all stats produced at input time.
HTML & CSS
HTML provides the structure for the whole page and CSS let’s me style how that HTML is displayed.
STYLING ELEMENTS
By adding classes and/or ids to the different elements I can reference these in the style sheet (The CSS).For example a can be styled like this:
tr.table-title {
background-color: #34495E;
}
Where the dot stands for class (# stands for id). All table rows with class “table-title” will have a background colour of #34495E.
jQUERY
I use jQUery extensively on the Winstanley website. It can “listen” for changes to elements on the page.
For instance if a dropdown menu changes value it can get that value and pass it to a PHP script on the server and then retrieve data based on that value.
ALTER ELEMENTS
jQuery can change or add CSS to elements. For example on the results page when the data is passed back to the jQuery from the server, the jQuery changes the CSS “display:none” setting of a div to “display:block” and then adds the data to that div.
NO PAGE RELOAD
One of the nice things about jQuery is its ability the change elements on the page without a page reload.It makes things faster and smoother. For example when the results date dropdown changes the results for that date can be displayed without a page reload.
TEAM WORK
Some team work is needed between jQuery, PHP & mySQL for the complete process. jQuery detects the change, gets the value and passes it to PHP on the server. With the mySQL inside the PHP script this gets the results for that date. The PHP then passes the results back and jQuery displays the results on the page!
jQuery makes WordPress design more intesting for the user and the designer.
PHP & mySQL
The Winstanley St. Aidans Football website looks like one of my simpler sites possibly due to it’s minimalist style but underneath is is packed with PHP, mySQL, javascript and jQuery magic.
VARIABLE DATA
PHP is great to have when information on a page changes over time. On the Winstanley football page the number of teams can change as well as the team names. PHP can get the changed data and display it. Using mySQL the database supplies the necessary information and the PHP lays it out.
Saving Results
Once the results and squad data has been added by the site owner the data is saved using PHP and mySQL.Squad information and a match reportare also input at the same time and saved to the database.
