Terrell - Creating Data-Driven Web Sites: An Introduction to HTML, CSS, PHP, and MySQL

CREATING DATA-DRIVEN WEBSITES

CREATING DATA-DRIVEN WEBSITES

AN INTRODUCTION TO HTML, CSS, PHP, AND MYSQL

BOB TERRELL

Creating Data-Driven Websites: An Introduction to HTML, CSS, PHP, and MySQL

Copyright Momentum Press, LLC, 2019.

All rights reserved. No part of this publication may be reproduced, stored in a retrieval system, or transmitted in any form or by any meanselectronic, mechanical, photocopy, recording, or any otherexcept for brief quotations, not to exceed 250 words, without the prior permission of the publisher.

First published by Momentum Press, LLC

222 East 46th Street, New York, NY 10017

www.momentumpress.net

ISBN-13: 978-1-94664-604-0 (print)

ISBN-13: 978-1-94664-605-7 (e-book)

Momentum Press Computer Science Collection

Cover and interior design by S4Carlisle Publishing Services Private Ltd., Chennai, India

10 9 8 7 6 5 4 3 2 1

Printed in the United States of America

ABSTRACT

Todays modern world is heavily dependent on the World Wide Web. It affects the way we communicate, how we shop, and how we learn about the world. Every website, every page, consists of four fundamental elements: the structure, the style, the programming, and the data. These correspond to four different languages, respectively: HTML, CSS, PHP, and MySQL.

The purpose of this book is to provide an introduction to this set of technologies to teach a new programmer how to get started creating data-driven websites and to provide a jumping-off point for the reader to expand his or her skills. After learning the necessary components, users will have the understanding required to use the above technologies to create a working website. This book is aimed at the programmer or student who understands the basic building blocks of programming such as statements and control structures but lacks knowledge of the syntax and application of the above-mentioned technologies.

Keywords

HTML; PHP; website; MAMP; LAMP; databases; CSS; structured query language; SQL; MySQL

CONTENTS

ACKNOWLEDGMENTS

I would like to thank my wife for her patience and understanding and for occupying the time of three children long enough to write this book; Lisa MacLean, for being my favorite professor; my parents, for always seeing the potential in me and wanting the best for me; and fate, for life has given me many blessings and opportunities arising from circumstances that reach far beyond my own actions.

INTRODUCTION

The purpose of this book is to teach you, the reader, the basics of web development. Web development is made up of many different parts and uses many different languages. The languages that this book uses are HTML, CSS, PHP, and MySQL. These languages, and the software to interpret them, are freely available and can run on Windows, macOS, and Linux, making them a natural choice for the beginner.

PROJECT

As an example, through the course of this book, we will create a fully functioning project: a style guide. When multiple programmers work on a project together, its common for them to have learned multiple different customs when coding. It isnt generally important whether a line is indented with four spaces or a tab, but it is important that the same method be used consistently throughout code. In a more general sense, this can be thought of as a suggestion box. Users (in this case, our hypothetical fellow coders) make suggestions regarding the style to be used a collaborative project, and the group as a whole votes on them. Those suggestions that receive majority approval are considered to be part of the guide.

When designing a site, it helps to think about the various tasks it will need to perform. Generally speaking, each task will be a separate script (or page). Just from our description, we have a short list of tasks that the site must perform:

1. 1.Accept a suggestion from a user.
2. 2.Allow users to vote on suggestions.
3. 3.Determine whether a suggestion has a majority vote.
4. 4.Display approved suggestions together.

This, however, is overly general. Each of these involves several smaller tasks. We also need an index (landing) page, something to show users who first visit the site. A more detailed, structured list would look as follows:

1. a.Index page. As a landing page, it should do the following:
2. 1.Have a link to approved suggestions (the guide).
3. 2.Contain a login link so we can distinguish between the different users and track their votes.
4. b.Handle users. As the administrator, we can create a section to handle user-related tasks. Specific tasks in this section should do the following:
5. 1.Display the list of users.
6. 2.Delete a user who is no longer with us.
7. c.Handle suggestions.
8. 1.Allow users to create a suggestion.
9. 2.Display a list of suggestions.
10. 3.Display details about a particular suggestion.
11. 4.Allow users to comment on a suggestion before voting, in case clarification is needed.
12. 5.Allow users to vote on a suggestion.

We may find as we proceed that even this isnt quite detailed enough, but it will be sufficient for now.

BEFORE WE BEGIN

As part of the project in this book, you will need a host with PHP, MySQL, and your choice of web server software. Apache is common on Mac and Linux; Windows users may use IIS (Internet Information Services). The host need not be from a web services provider; your personal computer is sufficient to run all of these. If you do not have a host set up for you, search for a guide to help you install these software packages on your machine.

CHAPTER 1

HTML

HTML is not, strictly, a programming language. HTML stands for hypertext markup language. It is a way of marking text, so that a web browser knows how to display it. It can be considered the most basic building block of a web page, and as such, it is where we begin.

It is customary when teaching a new language to begin with a simple program that simply outputs Hello, world! With HTML, it couldnt be simpler. Open a new document in your editor and type in Hello, world!, as seen below ().

Figure 1.1. Desc: Hello, world! in a text editor window

).

Figure 1.2. Desc: file hi.html visible in a folder

View the results in your web browser of choice. Enter in the URL for your web root, and add hi.html to the end ().

Figure 1.3. Desc: Hello, world! displayed in a web browser

Youre done!

FUNDAMENTALS

So whats really going on here? The short answer is it is the browsers job to make as much sense of an HTML file as it can . We can see what it has done by inspecting the web page. In Chrome: View -> Developer -> Developer Tools . In the window or pane that opens, select the Elements tab. We see that the browser has taken our file, which the web server has told it is an HTML file (thanks to the .html extension) and added to it. We should see something like the following ():