0% found this document useful (0 votes)

18 views

Sns 1 Design A Simple Web Page

The document describes the design of a simple social media application using Python and Flask. It includes: 1) An algorithm outlining the key steps to create the application, including setting up the project structure, installing dependencies, creating an RDF graph to store social data, and defining routes for the homepage and user profiles. 2) Code snippets for the HTML templates to display a list of users and individual profiles. 3) A Python file containing the code for the Flask application, including retrieving user and friendship data from the RDF graph and rendering the templates. 4) A CSS file to style the user interface elements like images, overlays, and links. The application allows users to

Uploaded by

divisoma525

Available Formats

Download as PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

18 views

Sns 1 Design A Simple Web Page

Uploaded by

divisoma525

Available Formats

Download as PDF, TXT or read online on Scribd

You are on page 1/ 8

lOMoARcPSD|38496501

Sns 1 - DESIGN A SIMPLE WEB PAGE

Social Network Security (Meenakshi Sundararajan Engineering College)

Scan to open on Studocu

Studocu is not sponsored or endorsed by any college or university

Downloaded by SOMASUNDARI P ([email protected])
lOMoARcPSD|38496501

MEENAKSHI SUNDARARAJAN ENGINEERING COLLEGE

#363, Arcot Road, Kodambakkam, Chennai – 600024, Tamil Nadu, India

Department: Computer Science & Engineering Register No.:311521104035

EX.NO: 01
DESIGN OWN SOCIAL MEDIA APPLICATION
DATE:

AIM:
To implement social media application.

OBJECTIVE:

 To learn and understand the functioning of semantic web related applications.

 To Develop semantic web related simple applications.

SOFTWARE REQUIRED:

Python, Flask

ALGORITHM:

Step1: Create a new directory for your project. Inside this directory, create the following subdirectories
and files.
Step2: Open a terminal and navigate to your project directory. Create a virtual environment (optional but
recommended), activate it, and install Flask
Step3: Flask : the web framework used for building the web application. render_template : A function
from Flask that renders HTML templates. Graph, Namespace, Literal, URIRef : These are classes from
the rdflib library, used for working with RDF (Resource Description Framework). RDF is a framework
for representing information about resources on the web.
Step4: create an instance of the Flask class, representing the web application
Step5: social_graph: An instance of the RDF Graph used to store social data. FOAF: A Namespace
object representing the Friend of a Friend (FOAF) vocabulary. FOAF is commonly used for describing
people and relationships on the web.
Step6: URIRef: Represents a URI reference. Sample user data is added to the RDF graph, including user
URIs and their names.
Step7: Adds a friendship relationship between user1 and user2 in the RDF graph.
Step8: Defines a route for the root URL (/). When a user accesses this URL, the index function is called.
The index function retrieves a list of users from the RDF graph and renders the 'index.html' template,
passing the users, social graph, and FOAF namespace to the template.

Page No.:

Downloaded by SOMASUNDARI P ([email protected])

lOMoARcPSD|38496501

MEENAKSHI SUNDARARAJAN ENGINEERING COLLEGE

#363, Arcot Road, Kodambakkam, Chennai – 600024, Tamil Nadu, India

Department: Computer Science & Engineering Register No.:311521104035

Step9: Defines a route for the '/profile/<user_id>' URL pattern. The <user_id> part is a dynamic
parameter. The profile function takes the user_id as a parameter, retrieves the user's information from
the RDF graph, and renders the 'profile.html' template, passing the user's name, friends, social graph,
and FOAF namespace to the template.
Step10: Checks if the script is being run directly (not imported as a module). If so, it starts the Flask
development server with debugging enabled.
Step11: Stop

PROGRAM:

index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Social Media App</title>
<link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
</head>
<body>
<div style="text-align: center;">
<h1>Users</h1>
</div>
<hr>
<div class="image-container">
{% for user in users %}
<a href="{{ url_for('profile', user_id=user.split('/')[-1]) }}">
<img src="https://tse1.mm.bing.net/th?
id=OIP.eoBtu339Epu84pJA0EY_QwAAAA&pid=Api&P=0&h=180" alt="User Image"
class="avatar">
<div class="overlay">{{ social_graph.value(user, FOAF.name) }}</div>
</a>
{% endfor %}
</div>
</body>
</html>

profile.html

Page No.:

Downloaded by SOMASUNDARI P ([email protected])

lOMoARcPSD|38496501

MEENAKSHI SUNDARARAJAN ENGINEERING COLLEGE

#363, Arcot Road, Kodambakkam, Chennai – 600024, Tamil Nadu, India

Department: Computer Science & Engineering Register No.:311521104035

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>User Profile</title>
<link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
</head>
<body>
<h1>User Profile</h1>
<p>Name: {{ user_name }}</p>
<h2>Friends</h2>
<ul>
{% for friend in friends %}
<li>{{ social_graph.value(friend, FOAF.name) }}</li>
{% endfor %}
</ul>
</body>
</html>

styles.css
/* static/styles.css */

body {
font-family:'Times New Roman', Times, serif;
margin: 20px;
background-color:aliceblue;
}

h1, h2 {
color: #333;
}

ul {
list-style-type: none;
padding: 0;
}

li {
margin-bottom: 10px;
}
/* Define a basic styling for the image container */
.image-container {
display: flex;

Page No.:

Downloaded by SOMASUNDARI P ([email protected])

lOMoARcPSD|38496501

MEENAKSHI SUNDARARAJAN ENGINEERING COLLEGE

#363, Arcot Road, Kodambakkam, Chennai – 600024, Tamil Nadu, India

Department: Computer Science & Engineering Register No.:311521104035

justify-content:space-evenly;
max-width: 800px; /* Adjust the max-width based on your design */
margin: auto; /* Center the container */
}

/* Style for each individual image container */

.image-container a {
position: relative;
text-decoration: none;
display: inline-block; /* Ensure block-level layout for the anchor */
}

/* Style for each individual image */

.image-container img {
width: 100%; /* Set the width to 100% to match the container size */
height: auto; /* Auto-adjust height to maintain the aspect ratio */
margin-right: 16px; /* Add some spacing between images */
transition: transform 0.3s; /* Add a smooth transition effect */
display: block; /* Ensure block-level layout for the image */
}

/* Style for the text overlay */

.image-container .overlay {
position: absolute;
top: 0;
left: 0;
width: 100%; /* Set the width to 100% to match the container size */
height: 100%; /* Set the height to 100% to match the container size */
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
background: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
color: #fff; /* Text color */
transition: opacity 0.3s; /* Add a smooth transition effect */
pointer-events: none; /* Ensure the overlay doesn't block interactions with the underlying image */
}

/* Hover effect on images */

.image-container a:hover .overlay {
opacity: 1;
}

/* Style for the image links */

Page No.:

Downloaded by SOMASUNDARI P ([email protected])

lOMoARcPSD|38496501

MEENAKSHI SUNDARARAJAN ENGINEERING COLLEGE

#363, Arcot Road, Kodambakkam, Chennai – 600024, Tamil Nadu, India

Department: Computer Science & Engineering Register No.:311521104035

.image-container a {
text-decoration: none; /* Remove underlines from links */
color: inherit; /* Inherit text color from the parent */
}

python.py
# Install necessary libraries
# pip install Flask rdflib

from flask import Flask, render_template, request, redirect, url_for

from rdflib import Graph, Namespace, Literal, URIRef

app = Flask(__name__)

# RDF graph to store social data

social_graph = Graph()

# Define Namespace
FOAF = Namespace("http://xmlns.com/foaf/0.1/")

# Sample user data

user1 = URIRef("http://example.com/users/1")
user2 = URIRef("http://example.com/users/2")
user3 = URIRef("http://example.com/users/3")
user4 = URIRef("http://example.com/users/4")

social_graph.add((user1, FOAF.name, Literal("AAA")))

social_graph.add((user2, FOAF.name, Literal("BBB")))
social_graph.add((user3, FOAF.name, Literal("CCC")))
social_graph.add((user4, FOAF.name, Literal("DDD")))

# Sample friendship data

social_graph.add((user1, FOAF.knows, user2))
social_graph.add((user2, FOAF.knows, user3))
social_graph.add((user3, FOAF.knows, user4))
social_graph.add((user4, FOAF.knows, user1))
# ... (previous code)

@app.route('/')
def index():
# Display a list of users
users = social_graph.subjects(predicate=FOAF.name)
return render_template('index.html', users=users, social_graph=social_graph, FOAF=FOAF)

Page No.:

Downloaded by SOMASUNDARI P ([email protected])

lOMoARcPSD|38496501

MEENAKSHI SUNDARARAJAN ENGINEERING COLLEGE

#363, Arcot Road, Kodambakkam, Chennai – 600024, Tamil Nadu, India

Department: Computer Science & Engineering Register No.:311521104035

@app.route('/profile/<user_id>')
def profile(user_id):
# Display user profile and friends
user = URIRef(f"http://example.com/users/{user_id}")
user_name = social_graph.value(user, FOAF.name)
friends = social_graph.objects(subject=user, predicate=FOAF.knows)
return render_template('proile.html', user_name=user_name, friends=friends,
social_graph=social_graph, FOAF=FOAF)