diff --git a/app/components/subjects.tsx b/app/components/subjects.tsx index 489c3b3..43451af 100644 --- a/app/components/subjects.tsx +++ b/app/components/subjects.tsx @@ -123,7 +123,7 @@ const subjectCodes: Record = { }; // Available subjects -const available = ["ep", "c", "em1", "em2", "oops","os", "ml"]; +const available = ["ep", "c", "em1", "em2", "oops", "cn", "os"]; export default function SubjectsSection() { return ( diff --git a/app/sem4/cn/[chapter]/page.tsx b/app/sem4/cn/[chapter]/page.tsx new file mode 100644 index 0000000..6362552 --- /dev/null +++ b/app/sem4/cn/[chapter]/page.tsx @@ -0,0 +1,105 @@ +import Link from "next/link"; +import { Ch0Content } from "../content/chapter0"; +import { Ch1Content } from "../content/chapter1"; +import { Ch2Content } from "../content/chapter2"; +import { ArrowBigLeft, ArrowBigRight } from "lucide-react"; +import { Righteous } from "next/font/google"; + +const righteous = Righteous({ + subsets: ['latin'], + weight: '400', + variable: '--font-righteous', + }); + +// Chapter data for Computer Networks +const chapters = [ + { id: "ch0", title: "Course Outline", component: Ch0Content }, + { id: "ch1", title: "Introduction to Computer Networks & OSI Model", component: Ch1Content }, + { id: "ch2", title: "Networking Components & Devices", component: Ch2Content }, +]; + +type ChapterProps = { + params: { chapter: string }; +}; + +export default function ChapterPage({ params }: ChapterProps) { + const currentIndex = chapters.findIndex((c) => c.id === params.chapter); + const chapter = chapters[currentIndex]; + + if (!chapter) { + return

Chapter not found

; + } + + const ChapterComponent = chapter.component; + const prevChapter = currentIndex > 0 ? chapters[currentIndex - 1] : null; + const nextChapter = currentIndex < chapters.length - 1 ? chapters[currentIndex + 1] : null; + + return ( +
+ {/* Content */} +
+

+ Computer Networks +

+

{chapter.title}

+ + {/* Navigation Buttons */} +
+ {prevChapter ? ( + + Previous + + ) : ( +
+ )} + + {nextChapter ? ( + + Next + + ) : ( +
+ )} +
+ +
+ +
+ + {/* Navigation Buttons (Bottom) */} +
+ {prevChapter ? ( + + {prevChapter.title} + + ) : ( +
+ )} + + {nextChapter ? ( + + {nextChapter.title} + + ) : ( +
+ )} +
+
+ ); +} diff --git a/app/sem4/cn/components/sidebar.tsx b/app/sem4/cn/components/sidebar.tsx new file mode 100644 index 0000000..5bfaa6b --- /dev/null +++ b/app/sem4/cn/components/sidebar.tsx @@ -0,0 +1,68 @@ +"use client"; +import { Righteous } from "next/font/google"; +import Link from "next/link"; +import { usePathname } from "next/navigation"; +import { useState } from "react"; + +const righteous = Righteous({ + subsets: ["latin"], + weight: "400", + variable: "--font-righteous", +}); + +export default function Sidebar() { + const pathname = usePathname(); + const [open, setOpen] = useState(true); + + const chapters = [ + { id: "ch0", title: "Course Outline" }, + { id: "ch1", title: "Introduction to Computer Networks & OSI Model" }, + { id: "ch2", title: "Networking Components & Devices" }, + ]; + + return ( +
+ {/* Sidebar */} + + + {/* Toggle Button (always visible) */} + +
+ ); +} diff --git a/app/sem4/cn/content/chapter0.tsx b/app/sem4/cn/content/chapter0.tsx new file mode 100644 index 0000000..be8e45e --- /dev/null +++ b/app/sem4/cn/content/chapter0.tsx @@ -0,0 +1,108 @@ +import Image from "next/image"; + +export const Ch0Content = () => { + return ( +
+ +

+ Welcome to Computer Networks — a fundamental course + that explores how computers communicate and share resources. This course covers the + principles, protocols, and technologies that power the internet and modern telecommunications. +

+ +
+ + {/* Module I */} +
+

+ Module I: Foundations & Reference Models +

+ + Network Topologies + +
    +
  • Introduction to computer networks and their importance
    • +
  • Network topologies: Star, Mesh, Bus, Ring, and Hybrid
    • +
+ + Classification of Networks + +
    +
  • Classification of networks: LAN, MAN, WAN, PAN
    • +
  • Detailed study of the OSI Reference Model (7 Layers)
    • +
  • Introduction to the TCP/IP Protocol Suite
    • +
  • Comparison between OSI and TCP/IP models
    • +
+
+ + +
+ + {/* Module II */} +
+

+ Module II: Physical & Data Link Layers +

+
    +
  • Transmission Media: Guided (Twisted pair, Coaxial, Fiber) and Unguided (Radio, Micro, Infrared)
    • +
  • Data Link Layer design issues: Framing, Error control, and Flow control
    • +
  • Error detection and correction: Parity, Checksum, CRC, and Hamming code
    • +
  • Media Access Control (MAC) protocols: ALOHA, CSMA/CD, CSMA/CA
    • +
  • Ethernet standards and Wireless LANs (802.11)
    • +
+
+ +
+ + {/* Module III */} +
+

+ Module III: Network Layer +

+
    +
  • IP Addressing: IPv4 (Classful & Classless) and Introduction to IPv6
    • +
  • Subnetting and Supernetting basics
    • +
  • Routing Algorithms: Distance Vector (RIP) and Link State (OSPF)
    • +
  • Congestion control algorithms: Leaky Bucket and Token Bucket
    • +
  • Internetworking devices: Hubs, Switches, Routers, and Gateways
    • +
+
+ +
+ + {/* Module IV */} +
+

+ Module IV: Transport & Application Layers +

+
    +
  • Transport layer services: Connection-oriented vs Connectionless
    • +
  • UDP: Header format and characteristics
    • +
  • TCP: Segment structure, Connection management, and Flow control
    • +
  • Application Layer protocols: DNS, HTTP, HTTPS, FTP, SMTP, and DHCP
    • +
  • Network Security basics: Cryptography, Firewalls, and VPNs
    • +
+
+ +
+ +

+ By the end of this course, you will understand how data travels from one point to another + across the globe, the intricacies of the protocols involved, and the hardware that makes + it all possible. +

+
+ ); +}; diff --git a/app/sem4/cn/content/chapter1.tsx b/app/sem4/cn/content/chapter1.tsx new file mode 100644 index 0000000..8ab98f6 --- /dev/null +++ b/app/sem4/cn/content/chapter1.tsx @@ -0,0 +1,124 @@ +import Image from "next/image"; + +export const Ch1Content = () => { + return ( +
+ +

+ To understand how networks function, we use Reference Models. These models + break down the complex process of communication into smaller, manageable layers. The two most + prominent models are the OSI Model and the TCP/IP Model. +

+ +
+ + {/* OSI Model */} +
+

The OSI Reference Model

+

+ Developed by the ISO, the Open Systems Interconnection (OSI) model consists of 7 layers. + Each layer provides a specific service to the layer above it. +

+ + OSI Model Layers + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
LayerNamePrimary Responsibility
7ApplicationUser interface and network services (HTTP, FTP).
6PresentationData translation, encryption, and compression.
5SessionManaging sessions and dialogues between hosts.
4TransportEnd-to-end delivery and error recovery (TCP, UDP).
3NetworkRouting and logical addressing (IP).
2Data LinkFraming, error detection, and MAC addressing.
1PhysicalTransmission of raw bits over physical media.
+
+ +
+ Mnemonic: "Please Do Not Throw Sausage Pizza Away" (Physical, Data Link, Network, Transport, Session, Presentation, Application). +
+
+ +
+ + {/* TCP/IP Model */} +
+

The TCP/IP Model

+

+ The TCP/IP model is the practical implementation used in the real world (the Internet). + It has 4 main layers: +

+ + TCP/IP Model Layers + +
    +
  • Application Layer: Combines OSI's top three layers (Session, Presentation, Application).
    • +
  • Transport Layer: Responsible for host-to-host communication.
    • +
  • Internet Layer: Handles packet routing across networks (similar to OSI Network layer).
    • +
  • Network Access Layer: Covers the physical and data link layers of the OSI model.
    • +
+ +
+
Comparison Note
+
+ While OSI is a theoretical model used for teaching, TCP/IP is the actual standard protocols + that make the internet work today. +
+
+
+ +
+ +
+ ); +}; + diff --git a/app/sem4/cn/content/chapter2.tsx b/app/sem4/cn/content/chapter2.tsx new file mode 100644 index 0000000..8c02566 --- /dev/null +++ b/app/sem4/cn/content/chapter2.tsx @@ -0,0 +1,137 @@ +import Image from "next/image"; + +export const Ch2Content = () => { + return ( +
+ +

+ To build a network, we need specific hardware components that help in connecting devices + and routing data. These are known as Network Interconnection Devices. +

+ +
+ + {/* Hub */} +
+

1. Hub

+ Network Hub Diagram +
    +
  • Layer: Physical Layer (Layer 1).
    • +
  • Function: A non-intelligent device that broadcasts data to all ports.
    • +
  • Drawback: Leads to high network traffic and security risks as every device receives every packet.
    • +
+
+ +
+ + {/* Switch */} +
+

2. Switch

+ Network Switch Diagram +
    +
  • Layer: Data Link Layer (Layer 2).
    • +
  • Function: An intelligent device that uses MAC addresses to send data only to the intended recipient.
    • +
  • Benefit: Reduces collisions and improves efficiency compared to a hub.
    • +
+ +
+ Pro Tip: Switches maintain a "MAC Address Table" to remember which device is connected to which port. +
+
+ + +
+ + {/* Router */} +
+

3. Router

+
    +
  • Layer: Network Layer (Layer 3).
    • +
  • Function: Connects different networks (e.g., your home network to the Internet).
    • +
  • Logic: Uses IP addresses and routing tables to determine the best path for data packets.
    • +
+
+ +
+ + {/* Other Devices */} +
+

Other Important Devices

+
+
+

Bridge

+

+ Connects two similar network segments (e.g., two LANs) to form a larger network. +

+
+
+

Gateway

+

+ A "translator" that connects networks with different protocols (e.g., connecting a TCP/IP network to an IPX/SPX network). +

+
+
+

Repeater

+

+ Regenerates signals to allow them to travel longer distances without degradation. +

+
+
+

Modem

+

+ MOdulates/DEModulates signals between digital and analog forms for transmission over telephone lines. +

+
+
+
+ +
+ + {/* Comparison Table */} +
+

Comparison Summary

+
+ + + + + + + + + + + + + + + + + + + + + + + + + +
DeviceOSI LayerAddressing Used
HubPhysical (1)None (Broadcast)
SwitchData Link (2)MAC Address
RouterNetwork (3)IP Address
+
+
+ +
+ ); +}; diff --git a/app/sem4/cn/layout.tsx b/app/sem4/cn/layout.tsx new file mode 100644 index 0000000..8500caa --- /dev/null +++ b/app/sem4/cn/layout.tsx @@ -0,0 +1,30 @@ +// app/sem4/cn/layout.tsx +import Navbar from "../../components/navbar"; +import Sidebar from "./components/sidebar"; + +export const metadata = { + title: "Computer Networks | openCSE", + description: "Beginner-Friendly Computer Networks Documentation for Semester 4", +}; + +export default function Sem4CNLayout({ children }: { children: React.ReactNode }) { + return ( +
+ {/* Navigation Bar */} + + +
+ {/* Sidebar */} + + + {/* Main Area */} +
+ {/* Page Content */} +
+ {children} +
+
+
+
+ ); +} diff --git a/app/sem4/cn/page.tsx b/app/sem4/cn/page.tsx new file mode 100644 index 0000000..60ff712 --- /dev/null +++ b/app/sem4/cn/page.tsx @@ -0,0 +1,53 @@ +// app/sem4/cn/page.tsx +import { Righteous } from "next/font/google"; + +const righteous = Righteous({ + subsets: ["latin"], + weight: "400", + variable: "--font-righteous", +}); + +export default function ComputerNetworksHome() { + return ( +
+
+

+ Computer Networks +

+

+ Master the architecture of the modern internet. + From raw bits to global protocols, explore the backbone of digital communication. +

+ +
+
+

+ 🚀 Core Concepts +

+
    +
  • • OSI & TCP/IP Reference Models
    • +
  • • Network Topologies & Types
    • +
  • • Data Link & Media Access Control
    • +
+
+ +
+

+ 🛠️ Protocols & Hardware +

+
    +
  • • Switches, Routers & Gateways
    • +
  • • IPv4/IPv6 Addressing
    • +
  • • Transport Protocols (TCP/UDP)
    • +
+
+
+ +

+ ← Select a chapter from the sidebar to begin +

+
+
+ ); +} + diff --git a/public/cn-hub.png b/public/cn-hub.png new file mode 100644 index 0000000..bd3ef8c Binary files /dev/null and b/public/cn-hub.png differ diff --git a/public/cn-network-types.png b/public/cn-network-types.png new file mode 100644 index 0000000..d397a53 Binary files /dev/null and b/public/cn-network-types.png differ diff --git a/public/cn-osi.png b/public/cn-osi.png new file mode 100644 index 0000000..9b67cdf Binary files /dev/null and b/public/cn-osi.png differ diff --git a/public/cn-switch.png b/public/cn-switch.png new file mode 100644 index 0000000..c65f2aa Binary files /dev/null and b/public/cn-switch.png differ diff --git a/public/cn-tcp-ip.png b/public/cn-tcp-ip.png new file mode 100644 index 0000000..0649b9d Binary files /dev/null and b/public/cn-tcp-ip.png differ diff --git a/public/cn-topologies.png b/public/cn-topologies.png new file mode 100644 index 0000000..0a0b7dc Binary files /dev/null and b/public/cn-topologies.png differ