Горячее
Лучшее
Свежее
Подписки
Сообщества
Блоги
Эксперты
Войти
Забыли пароль?
или продолжите с
Создать аккаунт
Я хочу получать рассылки с лучшими постами за неделю
или
Восстановление пароля
Восстановление пароля
Получить код в Telegram
Войти с Яндекс ID Войти через VK ID
Создавая аккаунт, я соглашаюсь с правилами Пикабу и даю согласие на обработку персональных данных.
ПромокодыРаботаКурсыРекламаИгрыПополнение Steam
Пикабу Игры +1000 бесплатных онлайн игр
Отправляйся в погоню за легендарными сокровищами Бабы Яги в 3D!
А в это время Баба Яга отправится в погоню за тобой.

Убеги от Бабы Яги

Аркады, Мидкорные, 3D

Играть

Топ прошлой недели

  • AlexKud AlexKud 38 постов
  • SergeyKorsun SergeyKorsun 12 постов
  • SupportHuaport SupportHuaport 5 постов
Посмотреть весь топ

Лучшие посты недели

Рассылка Пикабу: отправляем самые рейтинговые материалы за 7 дней 🔥

Нажимая кнопку «Подписаться на рассылку», я соглашаюсь с Правилами Пикабу и даю согласие на обработку персональных данных.

Спасибо, что подписались!
Пожалуйста, проверьте почту 😊

Помощь Кодекс Пикабу Команда Пикабу Моб. приложение
Правила соцсети О рекомендациях О компании
Промокоды Биг Гик Промокоды Lamoda Промокоды МВидео Промокоды Яндекс Директ Промокоды Отелло Промокоды Aroma Butik Промокоды Яндекс Путешествия Постила Футбол сегодня

HTML + Программа

С этим тегом используют

CSS Программирование Javascript Верстка IT Сайт Web Windows Гайд Приложение Технологии Инновации Все
14 постов сначала свежее
yegorpolunin.69
yegorpolunin.69
6 месяцев назад

Создание простого градостроительного симулятора в браузере на HTML, CSS и JavaScript⁠⁠

Создание простого градостроительного симулятора в браузере на HTML, CSS и JavaScript — это интересная задача, которая может быть решена разными способами. Ниже предложен базовый пример, как можно создать исключительно простую версию такого симулятора. Этот пример будет включать в себя представление сеткой, на которую пользователь может кликать, чтобы "строить" здания.

### HTML

Начнем с HTML-файла, который создаст основную структуру страницы с элементом canvas для рисования:

```html

<!DOCTYPE html>

<html lang="ru">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Градостроительный Симулятор</title>

<link rel="stylesheet" href="styles.css">

</head>

<body>

<h1>Градостроительный Симулятор</h1>

<canvas id="cityCanvas"></canvas>

<script src="script.js"></script>

</body>

</html>

```

### CSS

В CSS файле мы зададим размеры нашего canvas и добавим некоторые базовые стили для оформления:

```css

body {

display: flex;

flex-direction: column;

align-items: center;

font-family: Arial, sans-serif;

}

canvas {

border: 1px solid black;

margin-top: 20px;

cursor: pointer;

}

h1 {

margin-bottom: 0;

}

```

### JavaScript

JavaScript будет использоваться для управления логикой игры. Основная идея — это создать сетку, на которой пользователь сможет "строить" здания путем кликов:

```javascript

const canvas = document.getElementById('cityCanvas');

const ctx = canvas.getContext('2d');

const gridSize = 10;

const cellSize = 40; // Размер клетки на сетке

canvas.width = gridSize * cellSize;

canvas.height = gridSize * cellSize;

const cityGrid = new Array(gridSize).fill(0).map(() => new Array(gridSize).fill(0));

// Функция для отрисовки сетки

function drawGrid() {

ctx.clearRect(0, 0, canvas.width, canvas.height);

for (let x = 0; x < gridSize; x++) {

for (let y = 0; y < gridSize; y++) {

ctx.strokeStyle = 'gray';

ctx.strokeRect(x * cellSize, y * cellSize, cellSize, cellSize);

if (cityGrid[x][y] === 1) { // Если построено здание

ctx.fillStyle = 'blue';

ctx.fillRect(x * cellSize, y * cellSize, cellSize, cellSize);

}

}

}

}

// Обработка клика

canvas.addEventListener('click', (event) => {

const rect = canvas.getBoundingClientRect();

const x = Math.floor((event.clientX - rect.left) / cellSize);

const y = Math.floor((event.clientY - rect.top) / cellSize);

cityGrid[x][y] = cityGrid[x][y] === 0 ? 1 : 0;

drawGrid();

});

// Начальная отрисовка сетки

drawGrid();

```

### Описание

1. **HTML**: Создает базовый каркас страницы с canvas, где будет происходить рисование.

2. **CSS**: Определяет стили для страницы и canvas, добавляя границу и стили для текста.

3. **JavaScript**: Определяет сетку города, состоящую из массивов. Пользователь может кликать на клетку сетки, чтобы "строить" (или "сносить") здания, используя двумерный массив для отслеживания состояния каждой клетки.

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

Показать полностью
Программирование HTML Web-программирование Программа Технологии Браузер Компьютер Текст Длиннопост
2
Mr.Ducks
Mr.Ducks
8 месяцев назад
Серия PHP и веб-разработка: полезные руководства и совет

Регистрация на PHP с использованием PDO и MySQL: Полное Руководство⁠⁠

В современном веб-разработке регистрация пользователей — это важная и часто встречающаяся задача. В этой статье мы рассмотрим, как создать простую систему регистрации с использованием HTML-формы, PHP для обработки данных, подключение к базе данных через PDO и работу с MySQL.

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

Регистрация на PHP с использованием PDO и MySQL: Полное Руководство PHP, Mysql, Регистрация, HTML, Безопасность, База данных, Веб-разработка, Персональные данные, IT, Программа, Длиннопост

Шаг 1: Создание HTML-формы для регистрации

Начнем с базовой HTML-формы, которая будет собирать имя пользователя, электронную почту и пароль. Эта форма отправляет данные методом POST на PHP-скрипт (register.php), который будет обрабатывать информацию.

<!DOCTYPE html>

<html lang="ru">

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Регистрация</title>

</head>

<body>

<h2>Форма регистрации</h2>

<form action="register.php" method="post">

<label for="username">Имя пользователя:</label><br>

<input type="text" id="username" name="username" required><br><br>

<label for="email">Email:</label><br>

<input type="email" id="email" name="email" required><br><br>

<label for="password">Пароль:</label><br>

<input type="password" id="password" name="password" required><br><br>

<input type="submit" value="Зарегистрироваться">

</form>

</body>

</html>

Шаг 2: PHP-скрипт для обработки данных с использованием PDO

Теперь перейдем к созданию PHP-скрипта (register.php), который будет принимать данные из формы и сохранять их в базе данных MySQL. Мы будем использовать PDO (PHP Data Objects) для подключения и работы с базой данных, что обеспечивает безопасность и удобство работы.

<?php

// Настройки подключения к базе данных

$host = 'localhost'; // Имя хоста

$dbname = 'my_database'; // Имя базы данных

$username_db = 'root'; // Имя пользователя БД

$password_db = ''; // Пароль БД (если есть)

// Подключение к базе данных через PDO

try {

$dsn = "mysql:host=$host;dbname=$dbname;charset=utf8";

$pdo = new PDO($dsn, $username_db, $password_db, [

PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION, // Включаем обработку ошибок

PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC, // Массивы по умолчанию

PDO::ATTR_EMULATE_PREPARES => false, // Отключаем эмуляцию подготовленных выражений

]);

} catch (PDOException $e) {

die("Ошибка подключения к базе данных: " . $e->getMessage());

}

// Проверка отправки формы

if ($_SERVER["REQUEST_METHOD"] == "POST") {

// Получаем данные из формы

$username = $_POST['username'];

$email = $_POST['email'];

$password = password_hash($_POST['password'], PASSWORD_DEFAULT); // Хэшируем пароль

// SQL-запрос для вставки данных

$sql = "INSERT INTO users (username, email, password) VALUES (:username, :email, :password)";

// Подготовка и выполнение запроса через PDO

try {

$stmt = $pdo->prepare($sql);

$stmt->execute([

':username' => $username,

':email' => $email,

':password' => $password

]);

echo "Регистрация прошла успешно!";

} catch (PDOException $e) {

echo "Ошибка при выполнении запроса: " . $e->getMessage();

}

}

// Закрытие соединения (необязательно в PDO, но можно сделать для аккуратности)

$pdo = null;

?>

Пояснение к коду:

  • Подключение через PDO: Мы подключаемся к базе данных через PDO. Этот способ работы с базой данных считается безопасным, так как поддерживает подготовленные выражения, защищающие от SQL-инъекций.

  • Хэширование пароля: Использование функции password_hash() позволяет безопасно хранить пароли, применяя современный алгоритм хэширования. Это значительно увеличивает уровень защиты пользовательских данных.

  • Подготовленные запросы: Мы используем подготовленные запросы для передачи данных в базу. Это защищает от SQL-инъекций, так как данные передаются отдельно от структуры SQL-запроса.

Шаг 3: Создание таблицы в MySQL

Перед тем, как вы сможете зарегистрировать пользователей, вам нужно создать таблицу для хранения информации о них. Вот пример SQL-запроса для создания таблицы users в базе данных:

CREATE TABLE users (

id INT AUTO_INCREMENT PRIMARY KEY,

username VARCHAR(50) NOT NULL,

email VARCHAR(100) NOT NULL,

password VARCHAR(255) NOT NULL,

created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP

);

Пояснение к таблице:

  • id: Автоматически увеличивающийся идентификатор для каждого пользователя.

  • username: Имя пользователя, которое должно быть уникальным и не пустым.

  • email: Электронная почта, которая также должна быть уникальной и валидной.

  • password: Хэшированный пароль пользователя.

  • created_at: Автоматическая отметка времени, когда пользователь зарегистрировался.

Преимущества использования PDO:

  1. Безопасность: PDO поддерживает подготовленные выражения, которые защищают от SQL-инъекций, одной из наиболее распространенных атак на базы данных.

  2. Кросс-базовая поддержка: PDO позволяет легко менять драйверы для работы с разными базами данных (например, MySQL, PostgreSQL, SQLite).

  3. Обработка ошибок: PDO легко настраивается для выброса исключений в случае ошибок, что помогает отлавливать и решать проблемы на ранних стадиях.

Хэширование паролей в PHP

Хэширование пароля с помощью password_hash() делает вашу систему более безопасной. Это важно, так как хранение паролей в открытом виде крайне небезопасно. При хэшировании создается "отпечаток" пароля, который невозможно восстановить до оригинала, даже если данные будут скомпрометированы.

$password = password_hash($_POST['password'], PASSWORD_DEFAULT);

Для проверки пароля при авторизации можно использовать функцию password_verify().

Заключение

Создание системы регистрации с использованием PHP и PDO — это простой, но мощный способ начать работу с безопасной аутентификацией пользователей. Мы рассмотрели основные аспекты: создание формы, работу с базой данных через PDO, использование подготовленных запросов для защиты от SQL-инъекций, а также хэширование паролей.

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

Убедитесь, что ваш сервер настроен на работу с PHP и MySQL, а также что конфигурация базы данных соответствует вашим требованиям.

Показать полностью 1
PHP Mysql Регистрация HTML Безопасность База данных Веб-разработка Персональные данные IT Программа Длиннопост
11
TECHLiveHACK
TECHLiveHACK
1 год назад

Конвертируем Markdown в готовый HTML документ⁠⁠

Конвертируем Markdown в готовый HTML документ Инновации, Гайд, Технологии, Программа, HTML, Сайт, Telegram (ссылка)

Если вы активно работаете с текстовой разметкой и хотите быстро и легко получать прекрасно оформленный HTML, md2html (https://htmlacademy.github.io/md2html/) – ваш идеальный инструмент.

Это не только эффективный конвертер из Markdown в HTML, но и удобный онлайн-редактор. Вы просто вводите свой md-код, и получаете готовый к использованию HTML без лишних усилий.

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

Источник: https://t.me/TechLiveHack/471

Показать полностью
Инновации Гайд Технологии Программа HTML Сайт Telegram (ссылка)
0
newtom1406
1 год назад
Программирование на PHP

Создание сайта с базой данных⁠⁠

Здравствуйте, пикабушники! Если среди Вас есть программисты, то хотел бы попросить совета. Хочу создать сайт для своей работы, где будут таблицы с данными, куда зарегистрированные аккаунты смогут вносить изменения. И такой, что я сам смогу вносить изменения, но у меня будет больше прав и возможностей. На каком языке лучше написать? Я посмотрел, что именно для работы с базой данных подходит phpmyadmin. Пробовал немного написать на html, css, js, но судя по постам в интернете и по личному опыту эта группа не сильно подойдет для базы данных, так сказать вызовет больше трудностей кажется.
Какими будут Ваши советы?

Программа Программирование Web-программирование Сайт HTML PHP Mysql Текст
31
2
OverCode
OverCode
2 года назад

Веб-студия - производственный ад или благо?⁠⁠

Эх.. Первый пост на данной платформе.
Интересно, получится ли написать что-то интересное?!

Сегодня, хотелось бы создать задаток для будущих постов в данной серии.
Она (серия), повествует, о том, как решил создать свою веб-студию, что из этого вышло на данный момент и выйдет в будущем.

Сразу хочу ответить, что сам по себе - разработчик средней руки.
Имею в стеке HTML5, CCS3, JS, Node.js, PHP, React.js, SQL, PostgreSQL и Kotlin.
Занимаюсь программированием около 3.5 лет и на данный момент, заканчиваю учебное заведение по специальности. С предисловием - всё. Переходим к самому интересному (возможно, что не очень).

Опустим процесс обучения азам и сразу перейдём к моменту получения первого заказа.
Интересно, что успел его выцепить ещё в то время, когда еле-еле освоил азы HTML и CSS.
Как-то гулял по просторам интернета и попал на биржу «Weblancer». Не могу сказать, что она сильно популярная, но в отличие от аналогов в RU сегменте, хотя бы даёт пару бесплатных откликов и возможность получить реальный заказ, а не спамит кучей фейков от ботов.
Тогда, моим максимумом были простенькие landing-page и формочки. Отправив пару откликов на немногочисленные запросы, которые хотя бы в теории мог выполнить, получил один положительный ответ и сразу же упало сообщение в личку от заказчика. Им оказался мужчина из Киева, который занимался перепродажей БУ стиральных машинок. Стоимость работы была мизерная (как и большинство подобных на фрилансе) - около 4000 рублей, но тогда, мне казалось, что это какие-то космические деньги.

Стоит упомянуть, что к моменту сдачи заказа, мы уже успели успешно ретироваться с биржи в Viber и деньги были перечислены напрямую, что в дальнейшем привело к моей блокировке на самой платформе (в целом - не жалею).

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

Заказчик был крайне доволен, оставил положительный отзыв и предложил подработать личным репетитором для его сына. Ставку согласовали в размере 500 руб/час (взрыв мозга для меня в 17 лет). Можно ли сказать, что был хорошим репетитором? Думаю, что да, хоть мои знания на тот момент и ограничивались самым базисом, старался подготавливать интересный материал и повторять все необходимые темы к урокам. Потом, парень ушёл на летние каникулы и к сожалению - больше мы не сотрудничали. В этом году, мужчина написал мне в Discord с просьбой помочь разобраться в части кода и мы быстренько разобрали, что там и как. Собственно, больше не контактировали, но опыт оказался интересным и зародил во мне желание найти подобное в будущем.

Долго ждать не пришлось - спустя месяц, упал заказ по вёрстке продающей landing-page под прогнозы на спорт. К слову.. Это был мой первый негативный опыт (кинули), но хочу оставить эту часть истории для отдельного поста. Возможно, что кому-то будет интересно, как избежать подобного и не потерять собственные время, деньги, силы и нервы.

Затем, последовал период проблем в личной жизни и мне пришлось выпасть из всего этого примерно на год. Осознал, что нахожусь в простое и никуда не двигаюсь. Принял волевое решение сутками налегать на документацию и в ускоренном темпе осваивать различные технологии. Так прошло около нескольких месяцев и на меня вышел подрядчик. Мы успели закрыть несколько крупных заказов и несколько landing-page, вошёл во вкус и начал получать удовольствие от профессии - это уже не было таким адом, каким было в момент изучения материала. Сложно передать боль и страдания во время изучения чего-то сложного, когда месяцами не выходишь из дома, смотришь в экран и пытаешься в чём-то разобраться, но предполагаю, что студенты технических ВУЗов смогут понять.

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

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

Теперь, я, как и мои соратники по студии, стоим перед бескрайней пропастью возможностей, которая, одновременно пугает и в то же время, побуждает к действию, маня и внушая тот самый энтузиазм, который когда-то, все мы испытывали, взяв первый заказ, впервые открыв документацию, установив WebStorm и написав первую строчку кода.

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

С Вами был OverCode.
Всех благ и до новых встреч!

Веб-студия - производственный ад или благо? IT, Web-программирование, Веб-разработка, Верстка, Блог, Истории из жизни, Программирование, Интернет, Услуги, Поиск работы, Заказ, Бизнес, Wordpress, CSS, Удаленная работа, Опыт, Фриланс, Программа, Javascript, HTML, Длиннопост
Показать полностью 1
[моё] IT Web-программирование Веб-разработка Верстка Блог Истории из жизни Программирование Интернет Услуги Поиск работы Заказ Бизнес Wordpress CSS Удаленная работа Опыт Фриланс Программа Javascript HTML Длиннопост
12
GerryNotMouse
GerryNotMouse
8 лет назад

Немного текста и полезностей для начинающих и познающих вёрстку и front end разработку⁠⁠

В честь 1 сентября хочу немного написать о самообучении , а именно немного посоветовать годной литературы. В начале хочу сказать, что если вы решили выучить вёрстку и разработку сайта, то, стоит выяснить для себя с чего вы начнёте, с какого языка. Я начинала не с азов( C++  или C# ) , они довольны сложные для понимания новичка , а с часто применяемых языков программирования ( HTML, CSS, Javascript или PHP) . Что-же я выделила несколько основных и хороших книг которые советую для прочтения :

HTML5 :

1) Лоусон, Шарп. Изучаем HTML 5

3) Rob Crowther, Joe Lennon, Ash Blue and Greg Wanish HTML5 in Action


CSS стоит изучать по одной из этих книг. Можно сразу по обеим.

1)Большая книга CSS3. Дэвид Макфарланд.

2) Lea Verou. CSS Secrets


По JS :

1) Джон Резиг. Pro JavaScript techniuqes


2) Дэвид Херман. Сила JavaScript


3) JavaScript. Подробное руководство. Дэвид Флэнаган.


4) Nicholas C. Zakas. Professional JavaScript for Web Developers


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


1 )Совершенный код. Стив Макконнелл.


Теперь перейдем к выбору редактора ,где вы будете писать свой код , я использовала Sublime Text , он довольно быстрый и легкий но существуют и другие :


Atom (кросс-платформенный, free).

SciTe простой, легкий и очень быстрый (Windows, бесплатный).

IDEA (Java)

RubyMine (Ruby)

Visual Studio

Это перечень из довольно достойных редакторов .


В дополнения к книгам можно воспользоваться обучающим программам , они от части бесплатные и довольно полезные ,вот ссылки на них :

https://www.codecademy.com/

https://htmlacademy.ru/


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

Надеюсь кому то это поможет в его начинании =)

Показать полностью
[моё] Программирование Программа HTML CSS Текст
20
Посты не найдены
О нас
О Пикабу Контакты Реклама Сообщить об ошибке Сообщить о нарушении законодательства Отзывы и предложения Новости Пикабу Мобильное приложение RSS
Информация
Помощь Кодекс Пикабу Команда Пикабу Конфиденциальность Правила соцсети О рекомендациях О компании
Наши проекты
Блоги Работа Промокоды Игры Курсы
Партнёры
Промокоды Биг Гик Промокоды Lamoda Промокоды Мвидео Промокоды Яндекс Директ Промокоды Отелло Промокоды Aroma Butik Промокоды Яндекс Путешествия Постила Футбол сегодня
На информационном ресурсе Pikabu.ru применяются рекомендательные технологии