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

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

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

4. 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.

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

6. 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

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

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

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

10. Screen Shot

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

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

13. “add image panel”

14. 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

15. 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

16. 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

17. CSS the image opacity changes style attributes of other HTML elements

18. 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)

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