Master PHP for Web Development in Module 11: From HTML Integration to Real-Time WebSockets

Introduction to PHP for Web Development

Welcome to Module 11 of our Master PHP from Basics to Advanced series! If you’ve been following along, you’ve mastered PHP basics, arrays, functions, object-oriented programming (OOP), error handling, file/database operations, and advanced concepts like REST APIs. Now, it’s time to bring it all together with PHP for web development, where you’ll learn to build dynamic, secure, and real-time web applications.In this comprehensive guide, we’ll cover:

PHP with HTML & CSS: Creating dynamic web pages.
PHP with JavaScript & AJAX: Building interactive, asynchronous interfaces.
Templating Engines: Using Twig and Blade for clean templates.
PHP Frameworks Overview: Exploring Laravel, Symfony, and CodeIgniter.
Security in PHP Web Apps: Preventing XSS, CSRF, and SQL injection.
PHP & WebSockets: Enabling real-time features like chat or notifications.

We’ll use real-world examples—like building a blog, an e-commerce dashboard, or a real-time chat system—to make the concepts relatable and engaging. Each section includes detailed explanations, code examples, best practices, pros and cons, and alternatives to ensure you understand every topic thoroughly. Whether you’re crafting a simple website or a complex real-time app, this guide will equip you with the tools to succeed.Let’s dive in!

1. PHP with HTML & CSS: Building Dynamic Web PagesWhat Is PHP with HTML & CSS?PHP integrates seamlessly with HTML and CSS to generate dynamic web content. PHP can embed HTML to create dynamic pages, while CSS styles the output for a polished user interface.Real-World Example: Blog Post DisplayIn a blog application, PHP can fetch posts from a database and render them in HTML with CSS styling.Code Example: Basic PHP with HTML & CSS

php

<?php
$posts = [
    ['title' => 'First Post', 'content' => 'Welcome to my blog!'],
    ['title' => 'Second Post', 'content' => 'PHP is awesome!']
];
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>PHP Blog</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 20px; }
        .post { border: 1px solid #ccc; padding: 15px; margin-bottom: 10px; }
        .post h2 { color: #333; }
    </style>
</head>
<body>
    <h1>My Blog</h1>
    <?php foreach ($posts as $post): ?>
        <div class="post">
            <h2><?php echo htmlspecialchars($post['title']); ?></h2>
            <p><?php echo htmlspecialchars($post['content']); ?></p>
        </div>
    <?php endforeach; ?>
</body>
</html>

Explanation:

PHP loops through the $posts array to generate HTML dynamically.
htmlspecialchars() prevents XSS by escaping special characters.
Inline CSS styles the posts for a clean look.

Advanced Example: Database-Driven Blog

php

<?php
class Blog {
    private $pdo;

    public function __construct($host, $dbname, $user, $pass) {
        $this->pdo = new PDO("mysql:host=$host;dbname=$dbname", $user, $pass);
        $this->pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
    }

    public function getPosts() {
        $stmt = $this->pdo->query("SELECT title, content FROM posts");
        return $stmt->fetchAll(PDO::FETCH_ASSOC);
    }
}

try {
    $blog = new Blog('localhost', 'blog', 'root', 'password');
    $posts = $blog->getPosts();
} catch (PDOException $e) {
    $posts = [];
    echo "Error: " . $e->getMessage();
}
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Dynamic Blog</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Dynamic Blog</h1>
    <?php if (empty($posts)): ?>
        <p>No posts found.</p>
    <?php else: ?>
        <?php foreach ($posts as $post): ?>
            <div class="post">
                <h2><?php echo htmlspecialchars($post['title']); ?></h2>
                <p><?php echo htmlspecialchars($post['content']); ?></p>
            </div>
        <?php endforeach; ?>
    <?php endif; ?>
</body>
</html>

styles.css:

css

body {
    font-family: Arial, sans-serif;
    margin: 20px;
    background-color: #f4f4f4;
}
.post {
    border: 1px solid #ddd;
    padding: 15px;
    margin-bottom: 15px;
    background-color: white;
    border-radius: 5px;
}
.post h2 {
    color: #2c3e50;
}

Explanation:

Uses PDO to fetch posts from a MySQL database.
External CSS (styles.css) improves maintainability.
Conditional rendering handles empty results.

Pros:

Dynamic Content: PHP generates HTML based on data.
Separation of Concerns: External CSS keeps styling separate.
Scalability: Database integration supports large datasets.

Cons:

Complexity: Mixing PHP with HTML can become messy.
Security: Requires escaping output to prevent XSS.

Best Practices:

Use htmlspecialchars() or equivalent to escape output.
Separate CSS into external files for maintainability.
Keep PHP logic minimal in HTML files; use classes or functions.

Alternatives:

Templating Engines: Twig or Blade for cleaner separation (covered later).
Frontend Frameworks: React or Vue.js for dynamic interfaces.

2. PHP with JavaScript & AJAX: Building Interactive InterfacesWhat Are JavaScript and AJAX?JavaScript adds interactivity to web pages, while AJAX (Asynchronous JavaScript and XML) enables asynchronous communication with the server, often using JSON. PHP can serve as the backend for AJAX requests.Real-World Example: Real-Time SearchIn an e-commerce site, users can search for products, and AJAX updates the results without reloading the page.Code Example: Basic AJAX with PHPsearch.php:

php

<?php
header('Content-Type: application/json');

$products = [
    ['name' => 'Laptop', 'price' => 999.99],
    ['name' => 'Phone', 'price' => 499.99],
    ['name' => 'Tablet', 'price' => 299.99]
];

$query = strtolower($_GET['query'] ?? '');
$results = array_filter($products, fn($product) => strpos(strtolower($product['name']), $query) !== false);

echo json_encode(array_values($results));
?>

index.html:

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Product Search</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 20px; }
        #results { margin-top: 20px; }
        .product { padding: 10px; border-bottom: 1px solid #ddd; }
    </style>
</head>
<body>
    <input type="text" id="search" placeholder="Search products...">
    <div id="results"></div>

    <script>
        document.getElementById('search').addEventListener('input', async function() {
            const query = this.value;
            const response = await fetch(`search.php?query=${encodeURIComponent(query)}`);
            const products = await response.json();
            const resultsDiv = document.getElementById('results');
            resultsDiv.innerHTML = products.map(p => `<div class="product">${p.name} - $${p.price}</div>`).join('');
        });
    </script>
</body>
</html>

Explanation:

The PHP script filters products based on a query parameter and returns JSON.
JavaScript uses the Fetch API to make asynchronous requests.
Results are displayed dynamically without page reload.

Advanced Example: Database-Driven AJAXapi/search.php:

php

<?php
header('Content-Type: application/json');

class ProductSearch {
    private $pdo;

    public function __construct($host, $dbname, $user, $pass) {
        $this->pdo = new PDO("mysql:host=$host;dbname=$dbname", $user, $pass);
        $this->pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
    }

    public function search($query) {
        $sql = "SELECT name, price FROM products WHERE name LIKE :query";
        $stmt = $this->pdo->prepare($sql);
        $stmt->execute(['query' => "%$query%"]);
        return $stmt->fetchAll(PDO::FETCH_ASSOC);
    }
}

try {
    $search = new ProductSearch('localhost', 'ecommerce', 'root', 'password');
    $query = $_GET['query'] ?? '';
    echo json_encode($search->search($query));
} catch (Exception $e) {
    http_response_code(500);
    echo json_encode(['error' => $e->getMessage()]);
}
?>

index.html (updated script):

html

<script>
    document.getElementById('search').addEventListener('input', async function() {
        const query = this.value;
        try {
            const response = await fetch(`api/search.php?query=${encodeURIComponent(query)}`);
            if (!response.ok) throw new Error('Network error');
            const products = await response.json();
            const resultsDiv = document.getElementById('results');
            resultsDiv.innerHTML = products.error 
                ? `<div class="error">${products.error}</div>`
                : products.map(p => `<div class="product">${p.name} - $${p.price}</div>`).join('');
        } catch (error) {
            document.getElementById('results').innerHTML = `<div class="error">${error.message}</div>`;
        }
    });
</script>

Explanation:

Uses PDO for secure database queries.
Handles errors on both server (PHP) and client (JavaScript) sides.
Displays error messages if the API fails.

Pros:

Interactivity: AJAX provides seamless user experiences.
Efficiency: Updates specific page parts without reloading.
Scalability: Works with APIs for modular applications.

Cons:

Complexity: Requires JavaScript and server-side coordination.
SEO: AJAX content may need server-side rendering for search engines.

Best Practices:

Use the Fetch API or modern JavaScript libraries for AJAX.
Return JSON from PHP scripts for consistency.
Handle errors gracefully on both client and server.

Alternatives:

Server-Side Rendering: Render full pages with PHP (slower UX).
WebSocket: For real-time updates (covered later).

3. Templating Engines: Twig and Blade BasicsWhat Are Templating Engines?Templating engines like Twig and Blade separate PHP logic from HTML, promoting cleaner, maintainable code. Twig is used with Symfony, while Blade is Laravel’s templating engine.Real-World Example: Task Management DashboardIn a task management dashboard, a templating engine can render task lists with reusable templates.Code Example: Twig Basicscomposer.json (install Twig):

json

{
    "require": {
        "twig/twig": "^3.0"
    }
}

index.php:

php

<?php
require 'vendor/autoload.php';

use Twig\Environment;
use Twig\Loader\FilesystemLoader;

$loader = new FilesystemLoader('templates');
$twig = new Environment($loader);

$tasks = [
    ['id' => 1, 'title' => 'Write Blog', 'status' => 'pending'],
    ['id' => 2, 'title' => 'Code Review', 'status' => 'completed']
];

echo $twig->render('tasks.html.twig', ['tasks' => $tasks]);
?>

templates/tasks.html.twig:

twig

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Task Dashboard</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 20px; }
        .task { padding: 10px; border-bottom: 1px solid #ddd; }
        .completed { color: green; }
    </style>
</head>
<body>
    <h1>Task Dashboard</h1>
    {% for task in tasks %}
        <div class="task {% if task.status == 'completed' %}completed{% endif %}">
            <h3>{{ task.title | e }}</h3>
            <p>Status: {{ task.status | e }}</p>
        </div>
    {% else %}
        <p>No tasks found.</p>
    {% endfor %}
</body>
</html>

Explanation:

Twig’s FilesystemLoader loads templates from the templates directory.
{{ task.title | e }} escapes output to prevent XSS.
{% for %} loops through tasks, with conditional styling.

Code Example: Blade Basics (Laravel)routes/web.php:

php

<?php
use Illuminate\Support\Facades\Route;

Route::get('/tasks', function () {
    $tasks = [
        ['id' => 1, 'title' => 'Write Blog', 'status' => 'pending'],
        ['id' => 2, 'title' => 'Code Review', 'status' => 'completed']
    ];
    return view('tasks', ['tasks' => $tasks]);
});

resources/views/tasks.blade.php:

blade

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Task Dashboard</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 20px; }
        .task { padding: 10px; border-bottom: 1px solid #ddd; }
        .completed { color: green; }
    </style>
</head>
<body>
    <h1>Task Dashboard</h1>
    @forelse ($tasks as $task)
        <div class="task {{ $task['status'] == 'completed' ? 'completed' : '' }}">
            <h3>{{ $task['title'] }}</h3>
            <p>Status: {{ $task['status'] }}</p>
        </div>
    @empty
        <p>No tasks found.</p>
    @endforelse
</body>
</html>

Explanation:

Blade’s @forelse directive handles looping and empty states.
{{ $task['title'] }} automatically escapes output.
Laravel’s routing integrates with the Blade template.

Pros:

Separation of Concerns: Keeps PHP logic out of templates.
Security: Built-in escaping prevents XSS.
Reusability: Templates can be reused across pages.

Cons:

Learning Curve: Requires learning engine-specific syntax.
Dependency: Adds external dependencies (e.g., Twig).

Best Practices:

Use Twig or Blade for large projects to separate logic and presentation.
Leverage template inheritance for reusable layouts.
Always escape output (Twig’s | e, Blade’s {{ }}).

Alternatives:

Raw PHP in HTML: Simpler but messy for large projects.
Frontend Frameworks: React or Vue.js for dynamic templates.

4. PHP Frameworks Overview: Laravel, Symfony, CodeIgniterWhat Are PHP Frameworks?PHP frameworks provide pre-built structures for web development, offering features like routing, ORM, and templating. Popular frameworks include Laravel, Symfony, and CodeIgniter.Real-World Example: E-Commerce PlatformAn e-commerce platform benefits from frameworks for routing, database management, and security.Code Example: Laravel Basicsroutes/web.php:

php

<?php
use App\Models\Product;
use Illuminate\Support\Facades\Route;

Route::get('/products', function () {
    $products = Product::all();
    return view('products', ['products' => $products]);
});

app/Models/Product.php:

php

<?php
namespace App\Models;

use Illuminate\Database\Eloquent\Model;

class Product extends Model {
    protected $fillable = ['name', 'price'];
}

resources/views/products.blade.php:

blade

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Products</title>
</head>
<body>
    <h1>Products</h1>
    @forelse ($products as $product)
        <div>
            <h3>{{ $product->name }}</h3>
            <p>Price: ${{ $product->price }}</p>
        </div>
    @empty
        <p>No products found.</p>
    @endforelse
</body>
</html>

Explanation:

Laravel’s Eloquent ORM handles database interactions.
Blade renders the product list.
Routing maps URLs to controller actions.

Code Example: Symfony Basicssrc/Controller/ProductController.php:

php

<?php
namespace App\Controller;

use App\Entity\Product;
use Doctrine\ORM\EntityManagerInterface;
use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use Symfony\Component\HttpFoundation\Response;
use Symfony\Component\Routing\Annotation\Route;

class ProductController extends AbstractController {
    #[Route('/products', name: 'product_list')]
    public function index(EntityManagerInterface $em): Response {
        $products = $em->getRepository(Product::class)->findAll();
        return $this->render('product/index.html.twig', ['products' => $products]);
    }
}

src/Entity/Product.php:

php

<?php
namespace App\Entity;

use Doctrine\ORM\Mapping as ORM;

#[ORM\Entity]
class Product {
    #[ORM\Id]
    #[ORM\GeneratedValue]
    #[ORM\Column]
    private ?int $id = null;

    #[ORM\Column]
    private ?string $name = null;

    #[ORM\Column]
    private ?float $price = null;

    // Getters and setters
}

templates/product/index.html.twig:

twig

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Products</title>
</head>
<body>
    <h1>Products</h1>
    {% for product in products %}
        <div>
            <h3>{{ product.name | e }}</h3>
            <p>Price: ${{ product.price }}</p>
        </div>
    {% else %}
        <p>No products found.</p>
    {% endfor %}
</body>
</html>

Code Example: CodeIgniter Basicsapplication/controllers/Products.php:

php

<?php
defined('BASEPATH') OR exit('No direct script access allowed');

class Products extends CI_Controller {
    public function __construct() {
        parent::__construct();
        $this->load->model('Product_model');
    }

    public function index() {
        $data['products'] = $this->Product_model->get_products();
        $this->load->view('products', $data);
    }
}

application/models/Product_model.php:

php

<?php
class Product_model extends CI_Model {
    public function get_products() {
        return $this->db->get('products')->result_array();
    }
}

application/views/products.php:

php

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Products</title>
</head>
<body>
    <h1>Products</h1>
    <?php if ($products): ?>
        <?php foreach ($products as $product): ?>
            <div>
                <h3><?php echo htmlspecialchars($product['name']); ?></h3>
                <p>Price: $<?php echo $product['price']; ?></p>
            </div>
        <?php endforeach; ?>
    <?php else: ?>
        <p>No products found.</p>
    <?php endif; ?>
</body>
</html>

Pros:

Laravel: Beginner-friendly, rich ecosystem, and Eloquent ORM.
Symfony: Flexible, reusable components, enterprise-ready.
CodeIgniter: Lightweight, fast, and simple for small projects.

Cons:

Laravel: Can be heavy for simple apps.
Symfony: Steeper learning curve.
CodeIgniter: Limited features compared to modern frameworks.

Best Practices:

Choose Laravel for rapid development, Symfony for enterprise apps, and CodeIgniter for lightweight projects.
Follow framework conventions (e.g., MVC pattern).
Use built-in security features (e.g., Laravel’s CSRF protection).

Alternatives:

Custom PHP: Build without a framework, but time-consuming.
Other Languages: Node.js, Django, or Ruby on Rails.

5. Security in PHP Web Apps: Preventing XSS, CSRF, and SQL InjectionWhat Are XSS, CSRF, and SQL Injection?

XSS (Cross-Site Scripting): Injecting malicious scripts into web pages.
CSRF (Cross-Site Request Forgery): Tricking users into performing unintended actions.
SQL Injection: Manipulating SQL queries with malicious input.

Real-World Example: Secure User FormA user registration form must prevent XSS in displayed data, CSRF in form submissions, and SQL injection in database queries.Code Example: Preventing XSS, CSRF, and SQL Injectionregister.php:

php

<?php
session_start();

class UserRegistration {
    private $pdo;

    public function __construct($host, $dbname, $user, $pass) {
        $this->pdo = new PDO("mysql:host=$host;dbname=$dbname", $user, $pass);
        $this->pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
    }

    public function register($username, $email, $token) {
        if (!hash_equals($_SESSION['csrf_token'], $token)) {
            throw new Exception("CSRF token mismatch.");
        }

        $sql = "INSERT INTO users (username, email) VALUES (:username, :email)";
        $stmt = $this->pdo->prepare($sql);
        $stmt->execute(['username' => $username, 'email' => $email]);
        return "User registered.";
    }
}

$_SESSION['csrf_token'] = bin2hex(random_bytes(32));

try {
    $reg = new UserRegistration('localhost', 'app', 'root', 'password');
    if ($_SERVER['REQUEST_METHOD'] === 'POST') {
        $username = filter_input(INPUT_POST, 'username', FILTER_SANITIZE_STRING);
        $email = filter_input(INPUT_POST, 'email', FILTER_SANITIZE_EMAIL);
        $token = $_POST['csrf_token'] ?? '';
        echo $reg->register($username, $email, $token);
    }
} catch (Exception $e) {
    echo "Error: " . $e->getMessage();
}
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Register</title>
</head>
<body>
    <form method="POST">
        <input type="hidden" name="csrf_token" value="<?php echo htmlspecialchars($_SESSION['csrf_token']); ?>">
        <label>Username: <input type="text" name="username"></label>
        <label>Email: <input type="email" name="email"></label>
        <button type="submit">Register</button>
    </form>
</body>
</html>

Explanation:

XSS: htmlspecialchars() escapes form output.
CSRF: A token is generated and validated using hash_equals().
SQL Injection: Prepared statements prevent malicious queries.

Pros:

Security: Protects users and data from attacks.
Trust: Enhances user confidence in your application.
Compliance: Meets security standards (e.g., OWASP).

Cons:

Complexity: Adds overhead to development.
Performance: Validation and token checks may slow requests.

Best Practices:

Always escape output (htmlspecialchars(), htmlentities()).
Use CSRF tokens for POST forms.
Use prepared statements for all database queries.

Alternatives:

Frameworks: Laravel/Symfony provide built-in security features.
WAF: Web Application Firewalls for additional protection.

6. PHP & WebSockets: Real-Time ApplicationsWhat Are WebSockets?WebSockets enable two-way, real-time communication between client and server, ideal for chat apps or live notifications. PHP can use libraries like Ratchet for WebSocket servers.Real-World Example: Chat ApplicationA real-time chat app allows users to send and receive messages instantly.Code Example: WebSocket Chat with Ratchetcomposer.json:

json

{
    "require": {
        "cboden/ratchet": "^0.4"
    }
}

server.php:

php

<?php
use Ratchet\MessageComponentInterface;
use Ratchet\ConnectionInterface;
require dirname(__DIR__) . '/vendor/autoload.php';

class Chat implements MessageComponentInterface {
    private $clients;

    public function __construct() {
        $this->clients = new \SplObjectStorage;
    }

    public function onOpen(ConnectionInterface $conn) {
        $this->clients->attach($conn);
        echo "New connection! ({$conn->resourceId})\n";
    }

    public function onMessage(ConnectionInterface $from, $msg) {
        foreach ($this->clients as $client) {
            if ($client !== $from) {
                $client->send($msg);
            }
        }
    }

    public function onClose(ConnectionInterface $conn) {
        $this->clients->detach($conn);
        echo "Connection closed! ({$conn->resourceId})\n";
    }

    public function onError(ConnectionInterface $conn, \Exception $e) {
        echo "Error: {$e->getMessage()}\n";
        $conn->close();
    }
}

$server = \Ratchet\Server\IoServer::factory(
    new \Ratchet\Http\HttpServer(
        new \Ratchet\WebSocket\WsServer(new Chat())
    ),
    8080
);
$server->run();

client.html:

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Chat App</title>
    <style>
        #messages { border: 1px solid #ddd; padding: 10px; height: 300px; overflow-y: scroll; }
    </style>
</head>
<body>
    <div id="messages"></div>
    <input type="text" id="message" placeholder="Type a message...">
    <button onclick="sendMessage()">Send</button>

    <script>
        const ws = new WebSocket('ws://localhost:8080');
        ws.onmessage = function(event) {
            const messages = document.getElementById('messages');
            messages.innerHTML += `<p>${event.data}</p>`;
            messages.scrollTop = messages.scrollHeight;
        };
        function sendMessage() {
            const input = document.getElementById('message');
            ws.send(input.value);
            input.value = '';
        }
    </script>
</body>
</html>

Explanation:

Ratchet creates a WebSocket server that broadcasts messages.
The client connects via WebSocket and sends/receives messages.
Run php server.php and open client.html in multiple browsers to test.

Pros:

Real-Time: Enables instant updates for users.
Interactivity: Ideal for chat, notifications, or live feeds.
Scalability: WebSockets maintain open connections efficiently.

Cons:

Complexity: Requires a separate WebSocket server process.
Resource Usage: Persistent connections can strain servers.

Best Practices:

Use libraries like Ratchet for WebSocket support.
Implement authentication for secure connections.
Monitor server resources for high-traffic apps.

Alternatives:

Server-Sent Events (SSE): Simpler for one-way updates.
Long Polling: Less efficient than WebSockets.

ConclusionCongratulations on completing Module 11: PHP for Web Development! You’ve learned how to:

Integrate PHP with HTML & CSS for dynamic pages.
Use JavaScript & AJAX for interactive interfaces.
Leverage Twig and Blade for clean templates.
Explore Laravel, Symfony, and CodeIgniter frameworks.
Secure apps against XSS, CSRF, and SQL injection.
Build real-time apps with WebSockets.

These skills empower you to create modern, secure, and interactive PHP web applications. Whether you’re building a blog, an e-commerce platform, or a real-time chat app, you’re now equipped to excel.

📘 Master PHP from Basics to Advanced | Complete PHP Learning Path 🎯 Visit Free Learning Zone

Mominul's Blog

Latest

Home Top Ad

Post Top Ad

Tuesday, August 19, 2025

Master PHP for Web Development in Module 11: From HTML Integration to Real-Time WebSockets

No comments:

Post a Comment

Post Bottom Ad

Author Details

Translate

Pageviews past week

Recent

Popular

Comments

Archive

Sponsor

Learning

Tags

Search This Blog

Contact Form