CS491B Software Design Lab Project Report Yuet-Chi Lee California State University, Los Angeles

Add-Image-Link An extension plug-in for program MediaWiki

Overview Abstract Introduction Technological Background System Overview Design and Implementation System Evaluation

Abstract Add-Image-Link is a MediaWiki extension that enhances the functionality to add image markup. With utilizing the technology of asynchronous JavaScript and XML (AJAX), user can search the MediaWiki database for the image user wanted to add and show preview of the image without reloading the edit page.

Introduction Motivation – I have been a wiki user – adding images into wiki page can be cumbersome – Solution: search keyword for image on editpage

Technological Background Wiki – a set of web pages with simplified markup language MediaWiki – web-based wiki software PHP – scripting language – can be embedded into HTML MySQL – database management system Apache HTTP Server – Apache for short – a web server program

Technological Background (cont.) MySQL Database Apache HTTP Server Server SideClient Side MediaWiki HTML PHP Scripts

System Overview Installation Application – Searching for image – Formatting image – Add markup

Design and Implementation addImageLink.php addImageLink.html addImageLink.css addImageLink.jsaddImageLink.png

Screen Shot

addImageLink.php php -- wfAddImageLinkPanel function Add JavaScript Add CSS Add button Add addimagelink panel

“adding image” button -- addImageLink.png shows/hides the “add image panel”

“add image panel”

JavaScript showHide – show or hide the “add image panel” SearchImageLinkCall – Using AJAX – monitors the search textbox input – calls the PHP function wfFindImageLink – through a build-in JavaScript function: sajax_do_call

addImageLink.php – wfFindImageLink function database search in column img_name in table image for entries that match the keyword it returns the result in specified HTML format – Unorder list of images

JavaScript (cont.) insertLink – validate the options of image markup user chosen – insert the markup into the edit page textarea Minor functions for validation of options

CSS the image opacity changes style attributes of other HTML elements

Start User switch to edit page User click “add image” button “Add image panel” display User input keyword Image with name matched User select image and image option Image markup pasted End User ViewBackground wfAddImageLinkPanel (PHP) showHide (JavaScript) SearchImageLinkCall (JavaScript) sajax_do_called (JavaScript) wfFindImageLink (PHP) sajax_do_called (JavaScript) insertLink (JavaScript)

System Evaluation Pros – Operate as expected – AJAX – Run on IE and FireFox Cons – More color theme – No upload image process