USER MANUAL

This user manual provides you with tutorials of how to get-to-know with
Open Social Advertising System (OSAN).

Contents:

I. Anatomy of OSAN
1.1 Menus (Basic)
1.2 Menu (for Admin)
1.3 Menu (for Regular User)
II. How to register at OSAN?
III. Logging-in at OSAN
IV. OSAN Group
4.1 Advertising in Group(s)
4.1.1 Creating a Group
4.1.2 Joining a Group
4.1.3 Advertise/Embedding Widget Code
4.1.4 Voting and Ad Ranking
4.2 Group Management
4.2.1 Accepting a Member's Request for Joining Group
4.2.2 Kicking a Member(s)
4.2.3 Checking your Group
V. User Information
5.1 Checking the User Profile
5.2 Editing the User Information
VI. Administration
VII. Free Source Code and Run it Offline
 Open Social Advertising System (OSAN)
Open Social Advertising System (OSAN) is a network for online users who
are interested to campaign their website in similar manner to online advertising,
and now this network makes it open advertising. Open advertising, meaning
users don’t need to wait for approval like such an approval from a marketing
service and they don’t pay here as typical advertiser does. OSAN isn’t a
marketing service, advertiser is also the publisher, it is neither a profiting site, it is
free, it was designed and developed for that sake. And the network we called it
Open Social Advertising System.

It is a proposal designed and developed by students (the proponents) of

College of Computer Studies, Lyceum of the Philippines University.
-
The Proponents:
 Cortez, Romnick Joy
 Estrada, Marjorie
 Gaviola, Ma. Theresa
 Jung, Daehee
I. Anatomy of OSAN
The screenshot provided below is the homepage of OSAN. The
screenshot are labeled for identification. The labels were mark in the screenshot
below for this user manual to familiarize of what those components of the site are
for.
1.1 Menus (Basic)
 Details of the labels from the previous screenshot are tabulated
below; in this, we called it Website Main Components/Basic Navigable
Menus:

Website Main Component/Basic Navigable Menus

LABEL Name DESCRIPTION
A Registration Directs user to the registration page.
B Loggin In Directs registered members to access the
network; will prompt them to input their registered
ID and Password.
P1 Homepage Link to the index page of the network.
P2 Groups Link to the list of groups created by members of
OSAN.
P3 Userboard Link to the userboard; a shout page or
announcement board for members of OSAN.
P4 Guestbook Link to the guestbook where unregistered
members can post their message here, also
registered members can post message here
either they’re logged in or out; must provide their
password to indicate they’re members of OSAN,
otherwise poster will mark as a guest.
P5 FAQs Link to the page of Frequently Asked Question(s).
If user(s) are confused to what OSAN is, visiting
this page may help them.
P6 Search Bar User can use the search bar if they want to find a
particular search. User can use the search bar in
three categories: (1) Search by URL, (2) Search
by Content, & (3) Search by User ID.
D1 Commercial This is a Flash design created for the network’s
Banner fancy look.
D2 New Adverts A rotating advert component that shows new or
recently registered web address in Groups at
OSAN. Anyone can copy the widget code of this
component and they may embed the code to their
respected site and will serve as supporting the
network.
 

 
1.2 Menu (for Admin)
In this screenshot the logged user is the Admin of OSAN. The Admin
serve as the owner of the network. Additional labeled components were
marked on the screenshot below, and those components will appear if the
user is logged-in into the network. These additional components are user-side
management tool, it will only appear if the user logged-in in the network.
1.3 Menu (for Regular User)
For this screenshot the logged user is only the Regular User of OSAN.
A Regular User has no administration power like Admin Page (M2) of the
Administrator. The Admin Page (M2) is omitted to their page as shown on the
screenshot below (see M2).
 Details of additional labels from the two screenshots in the previous
page are tabulated below; in this we called it User-side Management Tool:

USER-SIDE MANAGEMENT TOOL

LABEL Name DESCRIPTION
M1 User Information This link shows the user their profile
information.
M2 Admin Page This link directs the user (admin) to a page
where they can see the list of members of
OSAN and they can also restrict an illegaly
“word” to their network. (This feature is not
available for regular users)
M3 Editing User This feature lets its user to edit/update their
Information user information.
M4 Owned Group This component is a “created group” by the
user, clicking this link will directs the user to
their owned Group and they may see all their
members from there. NOTE: This feature will
only be available if the user created their own
group, otherwise, it will show a context kind like
this:

Asking if the user wants to create their group.

(you may see it on the top-right end of the
page)
M5 Master Page for This feature is similar to the Admin page of an
Managing Group Administrator of OSAN. This will only appear if
you have created a group in OSAN. The page
lets you accept and kick members from your
group. NOTE: This feature will only be
available if the user created their own group,
otherwise, it will show a context kind like this:
 Asking if the user wants to create their group.
(you may see it on the top-right end of the page;
see screenshot below).
M6 Member of Master of the group or regular member of a
Group Access group may use this feature. The user may
access their joined group on this dropdown box.
NOTE: A user can only create one group. They
can join maximum of three groups.

This context signifies that the users haven’t 
created a group of his/her interest. 
II. How to Register at OSAN?
The first thing the user can do to be part of OSAN is the registration. The
registration will take three steps to complete. To register at OSAN, navigate the
mouse on the top-left end of the page. Click the Register link as shown and
circled in the screenshot below:

(1) Clicking the

Register link and
the user will be
directed to the
Registration Page.

When the user clicks the ‘Register’ link, he or she will be directed to the
Registration page, from there there will be a registration form for user to fill-up.
 The screenshot of registration page is shown below and the tutorials on
the latter page. Registrants must read and agree to the terms and condition of
OSAN by putting a check on the check box provided in the Terms and Condition
form.

Reg.Form01 

Reg.Form02 

Unlike any other network, OSAN first putted the Terms and Condition
before filling-up the necessary information. Typical networks are putting their
Terms and Services and alike to separate page or they’re putting it on the last
step of registration. The creator of OSAN putted it to the first step of registration
so user may have the focus to read it first.

Reg.Form01 
Terms of Use Form

(2) Be sure to mark a check on this

Checkbox to register successfully.

After the step on reading and putting a checkbox on the Terms of Use
form, the registrant is now ready to fill-up the next form on the next step. The
Sign-up form is the second and the last form the registrant will fill-up.
 Clicking this will 
Reg.Form02  Sign-up Form     make Availability 
                ID Availability Check 
of User ID Check 
(3)   pops‐up.

 
R1
 

  Prompts the
R2 registrant to enter
  their desired ID.

R3 

 
R4
 

 
Meaning there is an existing
R5 user with ID “romcore” was
 
registered at the site.
R6
 
R7
 

 
R8
 

 
In this case, ID must not start
  with a number; it must start
with a letter.
 

 
This submits the fill-up Reset the Directs the User
 
information. It will show a warning fill-ups to the
message if there are invalid fill-ups, made by Homepage. No
  the registration is
otherwise the successful
successful if it will show a loading registrant. registration will
message   of “Registration occur by
Successful”, the site will pressing this. If the desired ID is
 
automatically directs the user to the available, click the
homepage. From there, Log-in must NOTE: Details of those black submit button
initiate to test if the access key “Rn” labels here in this page are “USE THIS ID” to
works (the User ID & Password). tabulated on the next page. continue.
 The creator of OSAN makes the Sign-up form very informative by putting
notes. The red contexts of notes that accompanying the fill-ups means it require
the registrant to put valid information to it. Those are also required fill-ups for a
successful registration.
Details of ‘Rn’ labels from the previous page are tabulated below; in this
we called it Sign-up/Registration Requirement Inputs:

SIGN-UP/REGISTRATION REQUIREMENT INPUTS

LABEL NAME WHAT REQUIRED INPUTS
R1 ID ID that will be used to Text, Underscore, or
access the network. Number
Once registered, it
cannot be changed.
Must be inputted at
minimum of 4
characters and
maximum of 8
characters. It must start
with a letter when
inputted. Only
lowercase letter,
number, and
underscore are allowed
to cook your desired ID.
Other than that, any
kinds of special case or
symbol are not valid.
R2 Name Name of the registrant. Text, or Number
Inputs of name are
restricted to minimum of
3 characters and
maximum and not more
than of 20 characters.
Not necessarily real
name.
R3 E-mail E-mail address of the E-mail
registrant. Inputs of e-
mail are restricted to
minimum of 4
characters and
maximum and not more
than of 30 characters.
 R4 Password Password that will be Text, or Number
used to access the
network. Inputs of
password are restricted
to minimum of 4
characters and
maximum and not more
than of 8 characters.
R5 Sex Gender of the Radio Button Selection
registrant. There are
only two selections for
this input, "Male" radio
button and "Female"
radio button. (this is
optional and can be
updated later on the
user’s page)
R6 Date of Birth Date of birth of the Number
registrant. There are
three inputs for birth of
date, the Year, Month,
& Date. (this is optional
and can be updated
later on the user’s
page)
R7 Web Address Primary web address or URL
the URL of the
registrant (this is
optional and can be
updated later on the
user’s page)
R8 About Personal description of Text, or Number
who the registrant is
(this is optional and can
be updated later on the
user’s page)

(4) After successful registration, a loading message will appear telling the
Registration is successfully done. The page will now automatically direct to the
homepage. From homepage, user may now login to the network.
III. Logging-in at OSAN
After registration at OSAN user may now check their page by logging-in in
four steps. Navigate the mouse on the top-left end of the page. Click the ‘Sign-in’
link as shown and circled in the screenshot below:

(1) Clicking the Sign-

in link and the user
will be directed to the
Login Page.

When the user clicks the ‘Sign-in’ link, he or she will be directed to the
Login page; from there there will be a login form for user to input their registered
ID and Password.
 The screenshot and tutorial of login page is shown below. The user shall
input their registered User ID and Password to access the network.

(2) User inputs their

registered User ID here.
L1
(3) User inputs their
L2 registered Password here.

(4) Press this to access the

network.

In case the user types a wrong access keys, a prompt message will
appear telling that the ID and Password are incorrect and he or she will be
directed again to the login page, the prompt message is as shown on the
screenshot below:
 Successful Login will direct the user to their respected page either they’re
the Admin or just a Regular User. Screenshot of a logged user is shown below:

Details of ‘Ln’ labels from the previous screenshots of tutorial of this

chapter are tabulated below; in this we called it Sign-in/Login Requirement
Inputs:

SIGN-IN/LOGIN REQUIREMENT INPUTS

LABEL NAME WHAT REQUIRED INPUTS
L1 User ID The User ID that the Text, Underscore, or
registrant have registered Number
in the network.
L2 Password The Password that the Text, or Number
registrant have registered
in the network.
IV. OSAN Group
User(s) can fully use the network by joining and or creating a group
because ad-links of the user can only revolves around “these” created groups.
Groups in OSAN are pool of peers with category of interests. A Group is
managed by a Master who is a member of the network. Every members of OSAN
has their rights to create a group and only one group is allowed per member.
They could also join an existing group if they don’t want to create of their own.
Members can join maximum of three groups in OSAN, as long as the Master of
that group would accept their request to join.

4.1 Advertising in Groups

To advertise in Groups at OSAN, user may create or join group to get
their web address promoted like the proprietary online advertising around the
Internet.

4.1.1 Creating a Group

To start creating a group, navigate the mouse on the top-right
end of the page. Click the ‘Create Group’ link as shown and circled in
the screenshot below:

(1) Clicking the ‘Create

Group’ link will direct
the user to the Group
Registration Page.
 The screenshot of Registration Page and tutorials is as shown below:

NOTE 01: The process of availability check of Group Name is

similar to ID Availability Check in Registration process in Chapter
II (see Chapter II – How to Register at OSAN, User Manual).

GR1 (2) User may fill-up the

Group Registration
Form provided at
Group Registration
Page.

GR2

(3) Press the Submit

GR3 button if fill-ups are
complete. Or press the
GR4 Reset button for
changes. Or go back
to Homepage if the
users change their
mind to register a

NOTE 02: The process of Submit/Reset/Home is similar to Registration process

in Chapter II (see Chapter II – How to Register at OSAN, User Manual).
 Details of ‘Ln’ labels from the previous screenshots of tutorial of this
chapter are tabulated below; in this we called it Group Registration
Requirement Inputs:

GROUP REGISTRATION REQUIREMENT INPUTS

LABEL NAME WHAT REQUIRED INPUTS
GR1 Group Name Choosing a Group Name is Text, Underscore, or
similar in choosing a User Number
ID from registration
process. Once registered,
it cannot be changed. Must
be inputted at minimum of
5 characters and maximum
of 15 characters. It must
start with a letter when
inputted. Only lowercase
letter, number, and
underscore are allowed to
cook your desired Group
name. Other than that, any
kinds of special case or
symbol are not valid.
GR2 Group Group Category SINGLE SELECTION
Category categorized the group that ONLY: Animation, Book,
the user wants to be Car, Computer, Comedy,
created. Dance, Fashion, Food,
Game, Hobby, Life,
Love, Movie, Music,
School, Sports, Study,
Tour, Work, Etc.
GR3 Group Master Group Master Automatically Set
automatically set the User
ID of the member to be its
Group Master name.
GR4 Group Description of what the Text, or Number
Description group is.

(4) After successful registration a loading message will appear telling

that the registration is successful. (Jump to section 4.2 - Group
Management, within also in this Chapter IV to continue with Managing
the User Group tutorial.)
4.1.2 Joining a Group
To join an existing group in OSAN, navigate the mouse on the
top-right end of the page. Click the ‘Group List’ link as shown and
circled in the screenshot below:

(1) Click the ‘Group List’ link and the User will be
directed to the Group page. Clicking the ‘Group List’
link on the top-right end of the page is similar to
clicking the “GROUPS” in the main menu (see
Chapter I – Anatomy of OSAN for familiarizing with
basic menus).

A User who has created their own group can also join other
existing group at maximum of three groups to join, but the Master of
that group has the power to accept or rejects members within their
discretion so User who had the idea to spam the groups will be
avoided.
 After clicking either the 'Group List' from the top-end of the page
or the "GROUPS" in basic menu, the page will be directed to the
Groups page. The Groups page contains list of groups created by
members of OSAN. A screenshot and tutorials is as shown below:

(2) After the

Group List is
loaded, it will
show a list of
groups that a
member can
join. To join,
select a desired
group by
clicking it. The
member can
search a
particular Group
Name if the list
is overcrowded.

(3) Clicking a
particular Group
in the Group list
will direct the
user to their
Group page.
Their Group
Page lists
members who
are part of their
group. Click
[JOIN THIS
GROUP] to join
or [Go Back to
the Grouplist] to
choose other
group.
Click this to Join Click this to find
their Group. another group.
 (4) Click the “Submit”
button or go back to
Homepage by clicking
the “Home” button to
cancel confirmation to
join the group.

Click this to Join Click this to find

their Group. another group.

(5) After
submitting the
request to join
the group a
note will be
indicated on the
bottom of their
group that the
master will
need to accept
the user’s
request to join.

(6) The User will wait to the Master of the Group if they’re accepted or not.
(Jump to Section 4.2 – Group Management of Chapter IV, to see the
tutorials of accepting Members to a group)
 4.1.3 Advertise/Embedding Widget Code
A user may start advertising if he or she will be accepted in the
group. A red context link will appear that tells the user [^SHARE your
Web Address HERE^] as shown on the screenshot below:

(1) Accepted
Member of the
group may now
advertise. First
step is by
sharing their
web address to
be advertised.
Clicking
‘[^SHARE your
Web Address
HERE^]’ link
will direct the
member of the
group to the
Post URL form.

PU1
(2) Click ‘Submit’
button and it will
submit the information PU2
to the database and
the URL will now
appear on the Group PU3
Ad. ‘Reset’ button
resets the fill-ups.
‘Back’ button directs
the member to their
respected group.
 Details of ‘PUn’ labels from the previous screenshots of tutorial of
this chapter are tabulated below; in this we called it Post URL
Requirement Inputs:

POST URL REQUIREMENT INPUTS

LABEL NAME WHAT REQUIRED
INPUTS
PU1 URL or the Web address of the member’s website URL
Web that is to be advertised/free-promoted by
Address the Group ad
PU2 Content of Description of the member’s website. Text
the Website
to be
Advertised
PU3 Banner of Logo or the banner of the member’s PICTURE
the Website website. Logo will be shown on the FILE: .jpeg
or Logo Group ad. JPEG file is only allowed to
be uploaded. A warning message will
appear if user uploaded wrong file type
other than JPEG file; the posting of their
URL will be reset and back to
registration again to Post URL form.

(3) After successful posting or sharing of the member’s URL to the group, it will
be now part of the Group Ad which is shown on the screenshot, next page.
(4) Members may
now copy the
widget code of the
Group Ad. To
copy, navigate the
upper part area of
the Group Member
form. Click it, and
a pop-up page
containing the
code will appear.
Copy the code and
embed it to the
customization
layout of the
member’s website.

(5) Members are

assumed to be
computer literate and
manipulative to their
website’s layout code.
(E.g. Google Blogger
has customization of
their Blog’s layout.)
 (6) The code that the member had copied shall be embedded to the member’s
website. Here, we have a tutorial guide of how to embed it on Google Blogger.
(See screenshot tutorial below)

(A) Inside the

customization page of
Google blogger, click
the ‘Add a Gadget’ link.

(B) A pop-up page will appear.

There are list of different Gadgets
to choose from in Google
Blogger. In this case, choose
‘HTML/JavaScript’ gadget by
clicking the add icon [+].

(C) Another pop-up page will

appear because of clicking the
Add icon before. Here, we now
paste the Ad Group widget code.
After pasting, click ‘Save’.

(7) View the Blog after saving the widget code and see if it works. (see
screenshot on the next page)
 This is how Open Social Advertising Network works. It will make
website of the members more visible, linkable, and friendly campaigning.

The Group Ad
provides the link
that the members Enigma Core’s Blog – Group
have registered to Member of ‘techie_org’ Group in
the group. The ad
OSAN.
here is link-
clickable that drives
the visitor to a
particular member’s
website if clicked.

Osanadverto’s Blog – Also a

Group Member of ‘techie_org’
Group in OSAN.
 4.1.4 Voting and Ad Ranking
There is a ranking system in the Group at OSAN. The ranking
system in the group affects the stacking order of the web-link of its
members to the online group ad. The ranking occurs via voting system
within the group.

RANK 1 

RANK 2 

RANK 3 

(1) To vote for ranks,

click a member’s URL
inside the group where
voter is also their co- Click [Next] for next member.
Click [Prev] for previous member.
member. Clicking any
member’s URL in the
Group will direct the
voter/co-member to a
voting page for them to
vote for particular
member.

(2) To give a vote, either choose ‘YES’

or ‘NO’ in the voting form and type a
statement why you voted for that
member. Both typing a statement and
choosing ‘Yes’ or ‘No’ are required
otherwise no voting will be done.
4.2 Group Management
A created group in OSAN can only be managed by the owner or we
called it Master.

4.2.1 Accepting and Kicking a Member

A Master of a group can see his/her list of members who have
joined and also those who will joined can be seen.

Clicking this will Clicking this will
accept a new delete the group, only
member who the Master could do
requested to join this. A confirmation
the Master’s message will appear
group. if the Master chooses
to delete the group.
Clicking this will kick out
a member in the group.
It is also a trigger to
reject a request to join
group. Again, only the
Master could do this, It
is within the discretion of
the Master if he/she
wants to kick or reject a
request.
4.2.2 Checking your Group
Checking a group is not limited to regular user of OSAN. A
member of OSAN can join a maximum of three groups so the selection
of Groups is limited to three.

Select a group first then click

the “GO” button to direct the
user to their respected group.
V. User Information
In OSAN, all User ID of its members are linked to their User Information or
what we called Profile. Clicking a User ID of a member will trigger a pop-up of a
page that contains their User Information as shown on a sample screenshot
below.

A member can edit their profile information by clicking the Edit/UserInfo at

the top-left end of the page. See screenshot on the next page for further info.
Editing the User Info is similar to fill-ups of registration to OSAN. Except that the
ID can no longer be changed.
VI. Administration Page
The Admin page is only for the owner of the network to use. Administrator
status to a user will be set and programmed by the developers. The Admin Page
has two distinct functions, it can kick a particular member in the network and it
can restrict the usage of word.

(1) To visit the Admin

page, navigate the top-
left end of the page.
Click ‘[ADMIN PAGE]’

(2) After clicking the

‘[ADMIN PAGE]’, the
user will be directed
to Users List. Users
List lists the whole
member of OSAN. An
Admin can kick-out a
member within
his/her discretion. On
the Users List page,
there is a link to
Restriction page.

(3) The Restriction

page is especially
created for restricting
an abusive word.
Adding a specific
word will block the
use of it in the
network.
VII. Free Source Code and Run it Offline
Since Open Social Advertising Network is open source, the developer
offers the whole code of the system for free. It is for the sake of continuing
development and those interested developers are open to join the developer’s
team at the following URL: http://openadnet.sourceforge.net/
The whole system file can be downloaded at the following URL:
http://sourceforge.net/projects/openadnet/files/
The source code of the system are PHP file, it can be run offline by a
server application or typically an Apache server application that can be
downloaded on their site at http://www.apache.org/ accompanying the Apache
server application is the PHP application and the database application like
MySQL.
The developers recommend bundle installation of PHP w/ MySql
installation – XAMPP which can be downloaded at the following URL:
http://www.apachefriends.org/en/xampp.html. It automatically configures the
application to run the open source code of Open Social Advertising Network
(OSAN). Instruction of how to install and run the application is also on their site.