Как написать сайт html php база

Как самостоятельно сделать сайт на PHP?

Перед тем, как сделать сайт на php , нужно предпринять меры предосторожности. Потому что ресурс может получиться крайне динамичным. Того и гляди, укусит!

PHP и HTML

Сейчас эти две дисциплины связаны почти воедино. Их тандем является основой, на которой построена « жизнь » большей части интернета. Конечно, в связке с html применяются и другие серверные языки ( Perl, ASP.NET ). Но их распространенность во всемирной паутине по сравнению с PHP , носит чисто эпизодический характер.

Для многих начинающих взаимосвязь между этими технологиями выглядит непонятной. С одной стороны статический html , который интерпретируется браузерами на стороне клиента. А с другой — программный язык, обрабатывающийся на сервере. Поэтому, перед написанием сайта на php с нуля, приведем простой пример взаимодействия этих двух технологий:

• Создадим новый файл с расширением php ;
• Поместим туда следующий код:

• Сохраним файл на локальном сервере и откроем его в браузере. Затем нажмем на правую клавишу мыши и в контекстном меню выберем пункт « Просмотр html страницы ».

Как видно на скриншоте, строка <?php echo date(«H:i d.m.Y»);?> не отображается в html коде страницы. И в браузере, и в коде видны лишь возвращенные дата и время. А это значит, что скрипт был обработан на серверной стороне. Поэтому создание сайта на php кардинально отличается от написания простых html страниц.

Динамический сайт

Современные сайты бывают двух основных типов:

• Статические – созданные лишь на основе html . Такие сайты не меняют свое содержимое в ответ на действия пользователей. Конечно, статический ресурс может реагировать на события и пользовательские действия. Но реализация динамичности страниц на стороне клиента имеет узкий диапазон применения, ограниченный возможностями Java Script .

• Динамические – способны изменять свое состояние и содержимое — html страницы динамических сайтов формируются налету в момент выполнения кода в ответ на запрос пользователя, посланный им из браузера на сервер. Чаще всего генерация страниц на стороне сервера происходит с помощью кода, написанного на php .

Динамический сайт на php состоит из следующих файлов:

• index.php – является основным файлом проекта;
• Шаблоны – включают в себя структуру той или иной части страницы ( шапки, подвала, основной части );
• Файлы CSS – хранят в себе все стилевые описания ресурса.

Кроме этого проект сайта может состоять из файлов, хранящих в себе код функций и методов php . А также включать в себя базу данных.

Как пишется сайт на PHP

Чтобы разобраться, как создается сайт на php , рассмотрим практический пример. Конечно, многое в нем упрощено, но весь механизм работы и этапы создания сохранены.

Имеется html сайт со следующей структурой и дизайном:

Код файла style.css :

Перед тем, как написать сайт на php до конца, весь html код нужно раскинуть по нескольким файлам:

• В header.php войдет весь код с начала и до конца слоя « header »;
• В footer.php – слой « foot » и « footer »;
• В content.php – весь код, оставшийся посредине.

Теперь создаем основную страницу index.php , в которой будут размещены вызовы файлов, содержащие в себе код нужных элементов дизайна. Итого в основном файле оказалось всего 3 строчки скрипта:

А если просмотреть в браузере html код страницы, то вы увидите код первоначального исходника:

Конечно, этот вариант подходит лишь для генерации основной страницы сайта. Но если код боковушки убрать в отдельный файл, тогда шаблон можно использовать и для генерации внутренних страниц сайта.

Путь в обход

Но такая разработка сайта требует затраты сил, наличия специализированного программного обеспечения и знаний. Поэтому хотелось бы найти более легкий вариант. Тогда следует воспользоваться конструктором php сайтов.

Они представляют собой определенный набор шаблонов с расширенным диапазоном настроек. Из-за чего они сильно схожи с обычными CMS . Конечно, высокой уникальности дизайна будущего сайта никто не гарантирует, и в дальнейшем могут возникнуть проблемы с переносом и адаптацией ресурса на другой хостинговой площадке или платформе. Вот несколько проверенных вариантов таких онлайн-сервисов:

– дополнительно к конструктору предлагается бесплатный хостинг, подключение домена и оптимизация созданного сайта для работы на мобильных устройствах.

С более подробным обзором популярных онлайн-конструкторов сайтов можно ознакомиться здесь. В интернете встречаются и десктопные версии конструкторов сайтов, но большая их часть платная.

Альтернативой таких онлайн-генераторов сайтов является использование CMS . По своей сути они тоже являются конструкторами сайтов.

Но генерация страниц ресурса происходит в них динамически. Наиболее популярные CMS :

• WordPress ;
• Joomla .

Создание сайта с нуля на php подходит не для всех. А применение специализированных конструкторов не всегда дает ожидаемый результат. Поэтому оптимальным вариантом будет развертывание нового сайта на основе популярной CMS .

Learn how to build a website using HTML, CSS, PHP, & MySQL

This tutorial gives you some instruction for self-learning and step-by-step resources for learning to build a web application.

I’ve created my unique method and this method developed based on my experience.

First of all, I’ve been programming for a long time ago. I developed different projects and systems before. I used different frameworks and advanced programming languages. When I was a beginner, I have no idea about programming. So, I’ve searched a lot of things to know what is programming and how to learn it. From the beginning, It was challenging for me, and I’m really confused because I don’t know where and how to start. That’s why I created this method and sharing this to you. So you will have a tool or pattern that helps you to learn how to code easily and to know the basic principles of programming. I hope you will enjoy it.

These are the three key to learn faster:
• Interest
• Make your code
• Get your first project

First, You need to know the basic definitions of:

1. HTML — is the markup language used for structuring and presenting content on the World Wide Web.

2. CSS — describes how HTML elements are to be displayed on a screen, paper, or in other media.

3. PHP — is a highly popular server-side scripting language. It is very flexible and has a lot of innovative features. It is the fastest resource available for creating database-enabled dynamic websites.

4. MySQL — is a database management system based on Structured Query Language (SQL) which is used in web applications.

And for me, I have a simple definition:
• HTML, CSS = Front-End
• PHP, MySQL = Back-End

Let’s start with the installation
What is XAMMP?
It’s a simple and lightweight solution that allows you to create a local web server.

So, you need to install XAMPP to run your code.

Download XAMPP Installer. Choose the version that compatible with your computer. I provided the link at the bottom.
https://www.apachefriends.org/index.html

Next, just run the installer file and continue the installation. I’ve attached a screenshot so you can follow the configuration.

Click Next to continue the installation.

Select the folder where would you like to install XAMPP. Click Next to continue.

XAMPP will begin the initial installation. Click Next to continue.

Once all of the files have been installed. Click Finish to complete the installation.

Next, you need to start Apache & MySQL manually. Just click the Start button.

Once the configuration is done, go to http://localhost/ in your web browser.

Now, you have successfully installed your local server. Let’s start coding.

Let’s start coding
First, you will need a text editor to create and edit your program. There are many options on the internet, but I prefer to use notepadd++ because it is free and easy to use. I’ll give you a link so you can download it directly.
https://notepad-plus-plus.org/download/v7.5.8.html

Once you have installed the editor, you should go to the directory where you installed XAMPP. Then, go to htdocs folder.

Inside of your htdocs, you should create your folder.

Then, Open your Notepadd++ and create a new file inside the folder and name it index.php

Inside the file. Write this code:

Now, test the link. You’ve successfully created your first page.
http://localhost/my_folder/index.php

Second, we need to create a header, menu, and footer. We are using PHP Include to avoid save file being repetitive.

Inside your folder, you should create those folders. I’ve attached screenshot.

Создание PHP+MySQL сайта: от простого к сложному — шаг первый

Для создания перспективного, расширяемого и эффективного сайта любой сложности следует начинать с простого. Это процесс нелёгкий, требует определённых базовых знаний PHP и MySQL, но если его рассмотреть по пунктам — то можно составить своего рода «рабочий план», который пригодится при создании новых сайтов. Подготовим «ядро» и базу для проекта. Вначале это будет обычный сайт визитка, но потом, добавляя функционал, его можна превратить во что угодно. Итак, приступим.

1. Подготовка базы данных. Создаём первую таблицу в БД MySQL

Создаём новую базу данных, например «mysite». Лично я привык работать с кодировкой UTF-8, по-этому сразу оговорюсь: проследите, чтобы все текстовые файлы сайта, сама база, таблицы и поля таблиц были в одной кодировке.
В новой базе делаем таблицу. Назовём её «pages». В этой таблице будут храниться статические страницы будущего сайта и информация о них. Таблица должна содержать следующие поля:

• page_id — идентификатор страницы (SMALLINT, primary key, auto_increment);
• page_alias — псевдоним страницы для строки адреса ЧПУ (VARCHAR, 255);
• page_title — название страницы в окне браузера (VARCHAR, 255);
• page_meta_d — мета описание страницы для тега meta description (VARCHAR, 255);
• page_meta_k — мета ключевые слова для тега meta keywords (VARCHAR, 255);
• page_h1 — заголовок страницы (VARCHAR, 255);
• page_s_desc — краткое описание материала, например если материалы сайта будут в виде блога (TEXT);
• page_content — основной текст страницы, который будет выводиться в центральную колонку сайта (TEXT);
• page_publish — содержит «Y» — если страница опубликована, или «N» — если она скрыта (CHAR, по умолчанию «Y»).

Сразу после создания таблицы вставляем в неё значения для главной страницы сайта. В поле «page_alias» для главной страницы предлагаю вставить значение «home». Метатеги — соответственно тематике всего сайта. Таким же образом можно посоздавать другие страницы, например «О компании» с алиасом «about» и своими метатегами, или «Контакты» с алиасом «contacts» и т.д.

2. Создаём файл конфигурации сайта

В корневой папке сайта, которая должна быть пуста на данном этапе, создаём папочку «cfg», в ней с помощью .htaccess закрываем доступ директивой «deny from all». Создаём файл core.php следующего содержания:

<?php defined(‘INDEX’) OR die(‘Прямой доступ к странице запрещён!’);

// MYSQL
class MyDB
<
var $dblogin = «root»; // ВАШ ЛОГИН К БАЗЕ ДАННЫХ
var $dbpass = «»; // ВАШ ПАРОЛЬ К БАЗЕ ДАННЫХ
var $db = «mysite»; // НАЗВАНИЕ БАЗЫ ДЛЯ САЙТА
var $dbhost=»localhost»;

var $link;
var $query;
var $err;
var $result;
var $data;
var $fetch;

function connect() <
$this->link = mysql_connect($this->dbhost, $this->dblogin, $this->dbpass);
mysql_select_db($this->db);
mysql_query(‘SET NAMES utf8’);
>

function close() <
mysql_close($this->link);
>

function run($query) <
$this->query = $query;
$this->result = mysql_query($this->query, $this->link);
$this->err = mysql_error();
>
function row() <
$this->data = mysql_fetch_assoc($this->result);
>
function fetch() <
while ($this->data = mysql_fetch_assoc($this->result)) <
$this->fetch = $this->data;
return $this->fetch;
>
>
function stop() <
unset($this->data);
unset($this->result);
unset($this->fetch);
unset($this->err);
unset($this->query);
>
>

Этот файл пока содержит только простой класс подключения к базе данных, но в дальнейшем в него можно добавлять разные полезные функции, которые будут доступны из любого места в коде сайта. Не забудьте изменить логин и пароль к Вашей базе.

Если Вы работаете в среде Windows, я могу порекоммендовать использовать редактор Notepad++. В этом редакторе есть нумерация строк, и он легко переводит текст из одной кодировки в другую. ВНИМАНИЕ! Если Вы работаете в кодировке UTF-8 — конвертируйте файлы в UTF-8 without BOM — это поможет избежать проблем в будущем.

3. Создаём index.php — главный контроллер сайта

Файл конфигурации создан. Теперь в корневой папке сайта создаём index.php — это и будет основной скрипт сайта, своего рода «главный контроллер». Содержание файла index.php:

<?php session_start();
define(«INDEX», «»); // УСТАНОВКА КОНСТАНТЫ ГЛАВНОГО КОНТРОЛЛЕРА

require_once($_SERVER[DOCUMENT_ROOT].»/cfg/core.php»); // ПОДКЛЮЧЕНИЕ ЯДРА

// ПОДКЛЮЧЕНИЕ К БД
$db = new MyDB();
$db->connect();

// ГЛАВНЫЙ КОНТРОЛЛЕР
switch ($_GET[option]) <
case «page»:
include($_SERVER[DOCUMENT_ROOT].»/com/page.php»);
break;
default:
include($_SERVER[DOCUMENT_ROOT].»/com/home.php»);
break;
>

include ($_SERVER[DOCUMENT_ROOT].»/template.php»);
$db->close();

Переменная $_GET[option] будет указывать главному контроллеру какой компонент сайта загружать при запросе. Сейчас в нашем сайте предусмотрено только два компонента: «страница» и «главная страница» (в принципе можно обойтись и одним компонентом вывода обычной страницы, но часто вид главной страницы сайта отличается от обычных страниц пунктов меню). Логика работы главного контроллера такова: из URL строки извлекается название нужного компонента (значение переменной $option), в зависимости от его значения подключается файл самого компонента (содержится в папке /com). Файл компонента выполняет все необходимые работы, извлекает из базы данные и записывает их в переменные, для передачи в шаблон дизайна. В самом конце подключается файл дизайна сайта, в который и передаются все переменные и данные, извлечённые в компонентах. Это звучит намного сложнее, чем работает.

4. Создаём компонент вывода обычной страницы

В корне сайта создаём папочку «com» — в ней будут храниться файлы компонентов. Компонент сайта, в моём понимании — это файл, в котором происходит обработка данных для разных разделов сайта. Например компонент обычной страницы извлекает из базы данных название, описание и текст материала, и записывает их в переменные $title, $meta_d, $meta_k, $content и др. Эти данные потом передаются в шаблон дизайна (под каждый компонент можно создавать свой шаблон дизайна) и выводятся пользователю в виде HTML-страницы. Например, компонент каталога, который можно создать в будущем, выполнял бы почти то же самое, но с данными про товары — а там своя специфика, другие поля в таблице, итд. По-этому для каждого функционального раздела сайта стоит создавать отдельный компонент. В схеме MVC (Model-View-Controller) компонент выполняет роль модели.

Создаём в папке «com» файл «page.php». Содержимое файла следущее:

<?php defined(‘INDEX’) OR die(‘Прямой доступ к странице запрещён!’);
/* КОМПОНЕНТ СТРАНИЦЫ */
$alias = $_GET[alias];
$query = «SELECT * FROM pages WHERE page_alias='».$alias.»‘ AND page_publish=’Y’ LIMIT 1″;
$db->run($query);
$db->row();
// ПЕРЕМЕННЫЕ КОМПОНЕНТА
$id = $db->data[page_id];
$alias = $db->data[page_alias];
$title = $db->data[page_title];
$h1 = $db->data[page_h1];
$meta_d = $db->data[page_meta_d];
$meta_k = $db->data[page_meta_k];
$s_desc = $db->data[page_s_desc];
$component = $db->data[page_content];
// ЕСЛИ СТРАНИЦЫ НЕ СУЩЕСТВУЕТ
if (!$id) <
header(«HTTP/1.1 404 Not Found»);
$component = «ОШИБКА 404! Данной страницы не существует»;
>
$db->stop();

5. Создаём компонент вывода главной страницы

Главная страница у нас в базе данных хранится под псевдонимом «home», и пока по своей структуре не отличается от обычных страниц сайта — это просто статья. Тем не менее создадим для неё отдельный компонент — на перспективу, так сказать.

Содержимое компонента «home.php» в папке «com» почти совпадает с содержимым компонента обычной страницы, за исключением строки запроса к базе и названия компонента. Строка запроса теперь выглядит так:

$query = «SELECT * FROM wx_pages WHERE page_alias=’home’ LIMIT 1»;

6. Создаём шаблон дизайна всего сайта

В корне сайта создаём файл template.php. По сути это обычный макет web-дизайна в формате HTML+CSS, только с PHP переменными в нужных местах. Между тегами title вставочка <?=$title?>, в центральной колонке сайта вставочка <?=$component?> и так по всему шаблону расставляем нужные переменные, которые объявлены в компонентах.

В корневой папке также должны быть папки «css» и «images» для элементов дизайна. В файле /css/style.css — можно настроить стили по своему усмотрению.

7. Чистые ссылки и файл .htaccess

Для создания чистых ссылок я использую mod_rewrite с прямыми указаниями правил для каждого компонента отдельно, так как разбор адресной строки средствами самого контроллера считаю излишним функционалом. Содержимое .htaccess на данном этапе такое:

How to Make a Website from Scratch Using PHP and MYSQL

In this tutorial, I am going to teach you how to create a dynamic website from scratch using PHP 7 and Mysql. This article is a nice real-life example that can help beginner learners to understand the basics of PHP and MYSQL. It is written for educational purposes, however, it represents a good base that can be used to deliver a fully-operational digital product. Together, we shall create an example website with login and registration form. At the end of the article you will be able to connect PHP with MYSQL, create a website from scratch and add dynamic content to it. In order to get the most of this article, you need to have some basic knowledge of PHP. You also need a webserver (localhost or hosting account), where you can put the scripts. Last but not least, you need a code editor (Notepad ++ is enough for now). I tested the codes and I can confirm that they are working on my test web server.

Table of Contents

1. Create a database

Before we can get things started, we need a database and a table, where users can register. Run the following query in MYSQL (you can use phpmyadmin):

Congratulations! You have created a database “db_1”. Now we need to create a table with columns for username, email, password and a date. Run the following in MYSQL:

Good job! We are done with the MYSQL part for now. Now it is time to connect PHP and MYSQL

2. Connect PHP and MYSQL

Create a db.php file and put it in the root directory of your webserver. (If you are running XAMPP on Windows, this is htdocs. If you run an Apache webserver on Ubuntu, you need to put the file in var/www/html). Paste the following code in your code editor:

3. Create Homepage

We need to create a home page. However, we might want to have a default page template, e.g. header and footer that are constant on all the pages. This can save as a lot of time, instead of having to code each page manually. For the purpose, create three new php files: Header.php, Footer.php and Index.php.

Finally, let’s make a very simple homepage. We will change it later, but let’s keep it really simple for now.

4. Create Register page

Create a file called register.php and use the following code:

This php code is creating a line in the “user” table from the database db_1, whenever a new user fills in the registration form. Now, go to http://localhost/register.php to check if everything works.

5. Create Login page

Create a file called login.php and paste the following code:

The explanations are inside the above code, please read them carefully. What you need to understand is that php does a check with the database whether the submitted data exists in the user table that we have already created in MYSQL. If this is the case, the user can log in to the restricted area. This is the area for logged-in users, e.g. the dashboard.

6. Create Dashboard and Logout

You need to have a dashboard page for the registered users. You first need to have a file called auth.php to memorize the session. In this way, any non-authorised (not logged-in) users who try to access the dashboard or any other restricted area of your site, will be redirected to login.php. You should require auth.php for all the pages in your restricted area.

Now create the dashboard.php file:

This is how your dashboard page should look like in your browser:

And logout.php file:

7. Different home page for a new user and a logged-in user

Now, remove the old index.php file and paste this code in index.php:

Now, when you go to http://localhost/, it should resolve to your new website!

This code might seem quite overwhelming at first, however, the majority of it is just bootstrap classes and divs to make it look better and they are not in the scope of this article. What is important is to understand the logic of the code. Basically, the script checks whether a user is logged in or not and it is able to display a different message for logged-in and logged-out users.

Congratulations! You have accomplished quite a lot so far and you should be proud of yourself. We have built an educational dynamic PHP-MySQL website from scratch (excluding bootstrap). Feel free to use this code and play around with it. You can modify it as much as you want. You might for example want to develop a more sophisticated login system, include a comment section or even let users create their own posts.

Note: this code is for educational purposes only and it should not be used on a production website, since it is not secure. Security is not in the scope of this article.