Full-Stack Web Development

Stranger Things Wiki

A comprehensive Wikipedia-style platform for the Netflix series, featuring dynamic content management for characters, episodes, and locations with secure user authentication.

Technologies
PHPMySQLJavaScriptBootstrap

Project Overview & Context

  • The Problem: Crowdsourced encyclopedias frequently suffer from bloated presentation interfaces and lack structural safeguards, leaving data updates vulnerable to malicious injection or unvetted overrides.
  • The Solution: A strongly customized, relational database index tailored specifically for parsing lore details from the Stranger Things universe within an isolated content management space.

Key Features & User Flow

  • Relational Universe Mapping: Structured schema linking character files directly to corresponding location summaries, quote segments, and season episodes.
  • Secure Multi-Tier Authentication: Modular session tracking mechanism evaluating privilege differences between standard readers and database curators.
  • Lore Asset Management: Specialized create, read, update, and delete (CRUD) views supporting dynamic updates to character backstories and dialogue tracking.

Technical Architecture & Tech Stack

  • Core Logic: Engineered directly on a clean server-side PHP processing framework to ensure zero footprint rendering.
  • Database: MySQL database utilizing fully normalized tables to represent cross-entities (e.g., character-episode junction tables).
  • Client Actions: JavaScript handles dynamic client-side interactions, filtered queries, and strict form input validation.
  • Design Framework: Built upon a responsive Bootstrap foundation for universal readability across devices.

Engineering Challenges & Solutions

Prevention of SQL Injection & Cross-Site Scripting (XSS)

  • Situation: Traditional PHP applications are vulnerable to SQL injections and XSS attacks via open input fields (like wiki search boxes or character editor forms).
  • Task: Enforce robust database query sanitation and secure user data outputs across the site.
  • Action:
    1. Replaced all raw SQL strings with PHP Data Objects (PDO) Prepared Statements (using parameterized inputs), blocking SQL injection vectors.
    2. Implemented a global utility wrapper around PHP’s htmlspecialchars() to sanitize and escape user-submitted content before rendering it inside HTML pages.
  • Result: Secure data parsing, fully passing penetration checks on user input fields.

Session Spoofing and Stateful Data Vulnerabilities

  • Situation: Malicious users could execute Cross-Site Request Forgery (CSRF) exploits on public update routes, enabling unauthorized updates to the core data layers without legitimate session approval.
  • Task: Implement a lightweight, zero-dependency token check system to validate the legitimacy of all form submissions.
  • Action:
    1. Built a secure token utility (csrf.php) that maps a unique cryptographic string directly into the user’s active session state.
    2. Modified all analytical data updates to validate the hidden form token against the session hash prior to committing database updates.
  • Result: Protected database content pipelines from remote request injection vulnerabilities without adding complex dependencies.

Gambaran Keseluruhan & Konteks Projek

  • Masalah: Ensiklopedia sumber awam sering kali terjejas disebabkan antara muka persembahan yang sarat dan kekurangan perlindungan berstruktur, menyebabkan kemas kini data terdedah kepada suntikan berniat jahat.
  • Penyelesaian: Indeks pangkalan data hubungan yang diubah suai khas, direka khusus untuk menganalisis butiran kisah dari dunia Stranger Things di dalam ruang pengurusan kandungan yang terasing.

Ciri-Ciri Teras & Aliran Pengguna

  • Pemetaan Alam Hubungan: Skema berstruktur yang menghubungkan rekod watak secara terus ke ringkasan lokasi yang sepadan, segmen petikan, dan episod musim.
  • Pengesahan Pelbagai Tingkat Selamat: Mekanisme penjejakan sesi berbilang modul yang menilai perbezaan hak akses antara pembaca biasa dan kurator pangkalan data.
  • Pengurusan Aset Kisah: Pandangan bina, baca, kemas kini, dan padam (CRUD) khas yang menyokong kemas kini dinamik untuk latar belakang watak dan penjejakan dialog.

Seni Bina Teknikal & Stack Teknologi

  • Logik Teras: Direka terus di atas rangka kerja pemprosesan PHP bahagian pelayan yang bersih untuk memastikan persembahan tanpa beban.
  • Pangkalan Data: Pangkalan data MySQL menggunakan jadual terselaras penuh untuk mewakili perhubungan rentas entiti (contohnya, jadual persimpangan watak-episod).
  • Tindakan Klien: JavaScript mengendalikan interaksi dinamik bahagian klien, pertanyaan yang ditapis, dan pengesahan borang masukan yang ketat.
  • Rangka Kerja Reka Bentuk: Dibina di atas asas Bootstrap yang responsif untuk kebolehbacaan sejagat di pelbagai peranti.

Cabaran Kejuruteraan & Penyelesaian

Pencegahan Suntikan SQL & Skrip Rentas Tapak (XSS)

  • Situasi: Aplikasi PHP tradisional terdedah kepada suntikan SQL dan serangan XSS melalui medan masukan terbuka (seperti kotak carian wiki atau borang penyunting watak).
  • Tugasan: Melaksanakan pembersihan pertanyaan pangkalan data yang kukuh dan mengamankan output data pengguna di seluruh tapak.
  • Tindakan:
    1. Menggantikan semua rentetan SQL mentah dengan PHP Data Objects (PDO) Prepared Statements (menggunakan masukan berparameter), menyekat vektor suntikan SQL.
    2. Melaksanakan pembungkus utiliti global di sekitar htmlspecialchars() PHP untuk membersihkan dan menapis kandungan yang dihantar pengguna sebelum memaparkannya di dalam halaman HTML.
  • Hasil: Pemprosesan data yang selamat, lulus ujian pencerobohan pada medan masukan pengguna sepenuhnya.

Penipuan Sesi & Kerentanan Data Keadaan

  • Situasi: Pengguna berniat jahat boleh melaksanakan eksploitasi CSRF pada laluan kemas kini awam, membolehkan kemas kini tanpa kebenaran ke lapisan data teras tanpa kelulusan sesi yang sah.
  • Tugasan: Melaksanakan sistem semakan token ringan tanpa kebergantungan luar untuk mengesahkan kesahihan semua penyerahan borang.
  • Tindakan:
    1. Membina utiliti token selamat (csrf.php) yang memetakan rentetan kriptografi unik secara terus ke dalam keadaan sesi aktif pengguna.
    2. Mengubah suai semua kemas kini data analitis untuk mengesahkan token borang tersembunyi berbanding cincangan sesi sebelum memasukkan kemas kini pangkalan data.
  • Hasil: Melindungi saluran kandungan pangkalan data daripada kerentanan suntikan permintaan jarak jauh tanpa menambah kebergantungan yang rumit.